David's Blog

[jQuery] 10個實用的jQuery小程式

| 0 留言

今天在寫碼貓這個很可愛的部落格上看到這篇蠻實用的文章,為了怕老人病發作,看一看就忘了,特地來給它記下來。

其實都是程式碼居多…

10個實用的jQuery小程式

原文: 10 awesome jQuery snippets

預先載入圖片
這個其實很好用,很多所謂網頁加速的技巧,也都用預先載入的原理。原理很簡單,我們只要create出img元素,並指定它的src屬性,瀏覽器就會幫我們把圖片載入,然後就會存在cache裡,不管它有沒有出現在HTML文件上。這樣之後要顯示圖片就會從cache抓,不需要再辛苦連線慢慢下載。

[cc lang=”javascript”]
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i–;) {
var cacheImage = document.createElement(‘img’);
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}

jQuery.preLoadImages(“image1.gif”, “/path/to/image2.png”);
[/cc]
→ Source: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

另開視窗的連結
下面這段小程式會針對有rel=”external”屬性的連結,使它點下去另開視窗。重點只在於function裡面的那個this.target=”_blank”,jQuery的selector我們可以改成其他任意方法,例如具有某個class的a元素: $(‘a[class=”link”]’)

[cc lang=”javascript”]
$(‘a[@rel$=’external’]’).click(function(){
this.target = “_blank”;
});

/*
Usage:
catswhocode.com
*/
[/cc]
→ Source: http://snipplr.com/view/315/-jquery–target-blank-links/

如果JavaScript有開啟,就把<body>加上class
這也算是一個偵測JavaScript有沒有開啟的技巧,簡單又方便,而且只要寫一行。

[cc lang=”javascript”]
$(‘body’).addClass(‘hasJS’);
[/cc]
→ Source: http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets/

捲動畫面到某個錨點
這種特效很常看到,利用jQuery很輕鬆就可以辦到。

[cc lang=”javascript”]
$(document).ready(function() {
$(“a.topLink”).click(function() {
$(“html, body”).animate({
scrollTop: $($(this).attr(“href”)).offset().top + “px”
}, {
duration: 500,
easing: “swing”
});
return false;
});
});
[/cc]
→ Source: http://snipplr.com/view.php?codeview&id=26739

滑鼠移入時淡入或淡出
也是一個很常見的特效,下面這段小程式會在頁面一開始載入時,先將所有圖片刷淡,然後滑鼠游標移過時將透明度opacity設為100%(完全不透明),移出後再刷淡。

[cc lang=”javascript”]
$(document).ready(function(){
$(“.thumbs img”).fadeTo(“slow”, 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

$(“.thumbs img”).hover(function(){
$(this).fadeTo(“slow”, 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(“slow”, 0.6); // This should set the opacity back to 60% on mouseout
});
});
[/cc]
→ Source: http://snipplr.com/view/18606/

直欄設成相等高度
我們在做網站排版的時候,有時候會想要把所有的直欄(column)弄成一樣高,就像以前用table排版那樣。下面這段程式會找出高度最大的那個直欄,然後把全部直欄設成相同高度。

[cc lang=”javascript”]
var max_height = 0;
$(“div.col”).each(function(){
if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$(“div.col”).height(max_height);
[/cc]
→ Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

讓舊式瀏覽器也使用HTML5標籤
HTML5現在是很熱門的網頁標準,但是以前舊式瀏覽器(例如萬惡的IE6)並不認得HTML5的新標籤。下面這段程式利用createElement自己手動把HTML5標籤create出來:

[cc lang=”javascript”]
(function(){
if (!/*@cc_on!@*/0) return;
var e = “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’), i=e.length;
while (i–) {
document.createElement(e[i])
}
})()
[/cc]

比較好的作法是把上面這段寫入獨立的.js檔,再利用IE版本判斷語法來載入:

[cc lang=”xml”]

[/cc]
→ Source: http://remysharp.com/2009/01/07/html5-enabling-script/

偵測瀏覽器是否支援某個CSS3屬性
下面這個function可以幫助我們偵測瀏覽器是否支援某個CSS3屬性,這個範例是檢查border-radius,當然你可以換成其他的屬性。但是要注意,傳入參數要把橫槓(-)拿掉,例如傳入borderRadius

[cc lang=”javascript”]
var supports = (function() {
var div = document.createElement(‘div’),
vendors = ‘Khtml Ms O Moz Webkit’.split(‘ ‘),
len = vendors.length;

return function(prop) {
if ( prop in div.style ) return true;

prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});

while(len–) {
if ( vendors[len] + prop in div.style ) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn’t.
return true;
}
}
return false;
};
})();

if ( supports(‘textShadow’) ) {
document.documentElement.className += ‘ textShadow’;
}
[/cc]
→ Source: http://snipplr.com/view/44079

取得URL參數
要取得URL參數也是超級簡單,其實魔法就在那個正規式而已…

[cc lang=”javascript”]
$.urlParam = function(name){
var results = new RegExp(‘[\\?&]’ + name + ‘=([^&#]*)’).exec(window.location.href);
if (!results) { return 0; }
return results[1] || 0;
}
// example.com?someparam=name&otherparam=8&id=6
$.urlParam(‘someparam’); // name
$.urlParam(‘id’); // 6
$.urlParam(‘notavar’); // null
[/cc]
→ Source: http://snipplr.com/view/26662

防止Enter鍵送出表單
一般瀏覽器預設按Enter是會送出表單的,但是現在像有些論壇甚至Facebook和Plurk等微網誌,輸入訊息時Enter是用來換行的,我們不希望它submit,所以這要怎樣防止按Enter鍵送出表單呢,用jQuery就可以輕鬆辦到,主要就是查出Enter鍵的KeyCode是13,然後在表單收到keypress事件時把它return false就好啦!

[cc lang=”javascript”]
$(“#form”).keypress(function(e) {
if (e.which == 13) {
return false;
}
});
[/cc]
→ Source: http://snipplr.com/view/10943/disable-enter-via-jquery/

發佈留言

Required fields are marked *.