jQuery使用技巧簡單總結_jquery

1.使用最新的jquery版本
覺得這個建議有待商榷，雖然越新的jquery版本性能上更加優秀，但是有些方法的變遷還是會導致一些bug，比如從1.4.2到1.5時很多朋友就抱怨ajax上出現問題了。建議是舊的頁面的jquery升級需謹慎，新項目可以大膽的使用jquery新版本。

還有個建議是使用google的cdn上的jquery文件，載入速度更快。猛擊Google Libraries API 進入檢視。

複製程式碼 程式碼如下:

2.保持選擇器的簡單
這個建議明河非常贊同，有很多朋友不喜歡給元素增加樣式或id，希望保持html的簡潔，使用jquery強大的選擇器去檢索元素，這不是好的習慣。首先越複雜的選擇器，遍歷的效率越低，這是顯而易見的，最高效率無疑是使用原生的getElementById()；其次，複雜的選擇器將標籤名稱和層級結構固化在裡面，假如你的html結構發生了改變，或標籤發生了改變，都直接造成檢索失敗。

複製程式碼 程式碼如下:

$('li[data-selected="true" ] a') // Fancy, but slow
$('li.selected a') // Better
$('#elem') // Best

存取DOM，是javascript最耗資源和效能的部分，所以盡量避免複雜或重複的遍歷DOM。
避免重複遍歷DOM的方法就是將$()檢索到的元素儲存到變量，例如下面的程式碼：

複製程式碼

複製程式碼

程式碼如下:

var buttons = $('#navigation a.button');

// 使用$前綴來標示jquery對象，是非常好的習慣，推薦使用。

複製程式碼

程式碼如下:

var $buttons = $('#\navigation a.button ');
var $buttons = $('#navigation a.button');
jquery選擇器支援大部分的css3偽類方法，像:visible, :hidden, : animated，雖然很便利，但請慎用，因為當你使用偽類選擇器的時候，jQuery不得不使用querySelectorAll()，性能的損耗更大。

3.jQuery對像作為數組處理 jQuery對象定義了length屬性，當使用數組的形式操作時候返回其實是DOM元素而不是子jQuery對象，比如下面代碼。

複製程式碼

程式碼如下:

// Selecting all the navigation buttons:

// 遍歷buttons對象複製代碼

程式碼如下:


for(var i=0;iconsole.log(buttons[i]); // 是DOM元素，而不是jQuery對象！
}

// We can even slice it: 複製程式碼

複製程式碼

複製程式碼

複製程式碼 程式碼

var firstFour = buttons.slice(0,4);


根據實驗，使用for或while循環，執行效率比$.each()來的高。詳細測試可以看several times faster。
使用length屬性檢查元素存在性：

複製程式碼 程式碼如下: if(buttons){ // This is always true // Do something } if(buttons.length){ // True only if buttons contains elements /// Do something }
4.selector屬性
jQuery物件都帶有一個selector屬性，用於取得選擇器名稱，例如：

複製程式碼 程式碼如下:

$('#container li:first-child').selector // #container li:first-child
$( '#container li').filter(':first-child').selector // #container li.filter(:first-child)

留意第二行程式碼，selector回傳的是取得的元素完整的選擇器。
這個屬性常用來寫jquery外掛的時候。

5.建立一個空的jQuery物件
這種情況應用場景不多，當你需要先建立個空的jQuery對象，然後使用add()方法朝此物件注入jQuery物件時會用到。

複製程式碼 程式碼如下:

var container = $([]);
container.add(another_element);)

6.選擇隨機元素
應用場景不多，舉個例子，現在你需要隨機給li增加一個red的class。
需要擴充jquery的選擇器，這段程式碼很好的示範了jQuery.expr的用法。

複製程式碼 程式碼如下:

(function($){


(function($){
var random = 0;

$.expr[':'].random = function(a, i, m, r) {
if (i == 0) {
random = Math.floor( Math.random() * r.length);
}
return i == random;
};
10.
11.})(jQuery);
12.
13.

14.
15.$('li:random').addClass('glow');

7.使用css鉤子

jQuery.cssHooks是1.4.3新增的方法，用的不估計不多，當你定義新的CSS Hooks時實際上定義的是getter和setter方法，舉個例子，border-radius這個圓角落屬性想要成功應用於firefox、webkit等瀏覽器，需要增加屬性前綴，例如-moz-border-radius和-webkit-border-radius。你可以透過定義CSS Hooks將其封裝成統一的介面borderRadius，而不是一一設定css屬性。 複製程式碼

程式碼如下:


$.cssHooks['borderorderius'] >get: function(elem, computed, extra){
// Depending on the browser, read the value of
// -moz-border-radius, -webkit-border-radius or border-radius
},
set: function(elem, value){
// Set the appropriate CSS3 property
}
};
10.
11.// Use it without woring which property the browser actually understands:

12.$('#rect').css('borderRadius',5);

8.使用自訂的Easing（緩緩>動動畫效果）函數

easing plugin是用的非常多的函數，可以實現不少華麗的效果。當內建的緩動效果無法滿足你的需求時，還可以自訂緩動函數。 複製程式碼

程式碼如下:


$.easing.easeInOutb = function (Quad = function (x,,, b, c, d) {
if ((t/=d/2) return -c/2 * ((--t)*(t -2) - 1) b;
};

// To use it:

$('#elem').animate({width:200},'slow','easeInOutQuad ');

9.$.proxy()的使用

關於$.proxy()，明河曾經詳細介紹過，傳送門在此《jquery1. 4教程三：新增方法教程（3）》。

jquery有個讓人頭痛的地方，回呼函數過多，上下文this總是在變化著，有時候我們需要控制this的指向，這時候就需要$.proxy()方法。 複製程式碼

程式碼如下:

Close

$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});

10.} );

嵌套的二個回呼函數this指向是不同的！現在我們希望this的指向是#panel的元素。程式碼如下： 複製程式碼

程式碼如下:

$('#panel').fadeIn(function(){
// Using $.proxy to bind this:

$('#panel button').click( $.proxy(function(){
// this points to #panel
$(this).fadeOut();
},this));
});

},this));
});

10.快速獲取節點數

這是個常用的技巧，代碼如下： 複製代碼

程式碼如下:

console.log( $('*').length );

11.建構個jquery外掛程式 11.建置個外掛程式

複製程式碼


程式碼如下:


(function($){

{
$. fn.yourPluginName = function(){
// Your code goes here
return this;
}; })(jQuery);

})(jQuery);
關於jquery外掛的構建，明河曾發過系列教程，傳送門：製作jquery文字提示插件—jquery插件實戰教程（1）。
這裡就不再詳述。

12.設定ajax全局事件 關於ajax全局事件，明河曾發過完整的介紹文章，傳送門：《jquery的ajax全局事件詳解—明河談jquery》 。

13.延遲動畫

複製程式碼



複製程式碼

程式碼>
// This is wrong:
$('#elem').animate({width:200},function(){ setTimeout(function(){ $('#elem ').animate({marginTop:100});
},2000);
});

// Do it like this: $('#elem'). animate({width:200}).delay(2000).animate({marginTop:100}); 當存在多個animate動畫時，如何處理動畫的執行順序是個煩心事，原文作者是建議使用delay()函數，如上面的程式碼，但明河的建議是使用queue()方法，因為delay你要考慮延遲多少時間，而queue沒有這個問題，進入隊列的函數會一個個順序執行。可以看明河以前的文章queue和dequeue—明河談jquery。

15.jquery的本地儲存

本地儲存在現在web應用中使用越來越頻繁，jquery有個專門用於本地儲存的插件叫$.jStorage jQuery plugin 。




複製程式碼

程式碼如下: // Check if "key" exists in the storage var value = $.jStorage.get("key"); if(!value){ // if not - load the data from the server value = load_data_from_server(); // 和 save it $.jStorage.set("key",value); }