本文總結述了15個值得開發(fā)人員關注的jQuery開發(fā)技巧和心得。非常精辟實用！分享給大家供大家參考，具體如下：

在這篇文章中，我們將介紹15個讓你的jQuery更加有效的技巧，大部分關于性能提升的，希望大家能夠喜歡！

1. 盡量使用最新版本的jQuery類庫

jQuery項目中使用了大量的創(chuàng)新。最好的方法來提高性能就是使用最新版本的jQuery。每一個新的版本都包含了優(yōu)化的bug修復。對我們來說唯一要干的就是修改tag，何樂而不為呢？

我們也可以使用免費的CDN服務，例如， Google來存放jQuery類庫。

<!-- Include a specific version of jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Include the latest version in the 1.6 branch -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

2. 使用簡單的選擇器

直到最近，返回DOM元素的方式都是解析選擇器字符串，JavaScript循環(huán)和內建的javascript API，例如， getElementbyId()，getElementsByTagName()，getElementsByClassName()三種方式的整合使用。但是現(xiàn)代瀏覽器都開始支持querySelectorAll()，這個方法能夠理解CSS查詢器，而且能帶來顯著的性能提升。

然而，我們應該避免使用復雜的選擇器返回元素。更不用說很多用戶使用老版本的瀏覽器，強迫jQuery去處理DOM樹。這個方式非常慢。

$('li[data-selected="true"] a')  // Fancy, but slow

$('li.selected a')  // Better

$('#elem')  // Best

選擇id是最快速的方式。如果你需要使用class名稱， 那么你最好帶上tag名稱，這樣會更快些。特別是在老瀏覽器和移動設備上。

訪問DOM是javascript應用最慢的方式 ，因此盡量少使用。使用變量去保存選擇器，這樣會使用cache來保存。性能更好。

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

// Some prefer prefixing their jQuery variables with $:

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

另外一個值得做的是jQuery給了你很多的額外便利選擇器 ，例如，:visible，:hidden，:animated還有其它，這些不是合法的CSS3選擇器。結果是你使用這些類庫就不能有效地利用 querySelectorAll() 方法。為了彌補這個問題，你需要先選擇元素，再過濾，如下：

$('a.button:animated');  // Does not use querySelectorAll()

$('a.button').filter(':animated');  // Uses it

3. 數(shù)組方式使用jQuery對象

運行選擇器的結果是一個jQuery對象。然而，jQuery類庫讓你感覺你正在使用一個定義了index和長度的數(shù)組。

// Selecting all the navigation buttons:

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

// We can loop though the collection:

for(var i=0;i<buttons.length;i++){

  console.log(buttons[i]);  // A DOM element, not a jQuery object

}

// We can even slice it:

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

如果性能是你關注的，那么使用簡單for或者while循環(huán)來處理，而不是$.each()，這樣能使你的代碼更快。

檢查長度也是一個檢查你的collection是否含有元素的方式。

if(buttons){ // This is always true

  // Do something

}

if(buttons.length){ // True only if buttons contains elements

  // Do something

}

4. 選擇器屬性

jQuery提供了一個屬性，這個屬性顯示了用來做鏈式的選擇器。

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

// #container li:first-child

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

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

雖然上面的例子針對同樣的元素，選擇器則完全不一樣。第二個實際上是非法的，你不可以使用它來創(chuàng)建一個對象。只能用來顯示filter方法是用來縮小collection。

5. 創(chuàng)建一個空的jQuery對象

創(chuàng)建一個新的jQuery空間能極大的減小開銷。有時候，你可能需要創(chuàng)建一個空的對象，然后使用add()方法添加對象。

var container = $([]);

container.add(another_element);

這也是quickEach方法的基礎，你可以使用這種更快的方式而非each()。

6. 選擇一個隨機元素

上面我提到過，jQuery添加它自己的選擇器過濾。除了類庫，你可以添加自己的過濾器。只需要添加一個新的方法到$.expr[':']對象。一個非常棒的使用方式是Waldek Mastykarz的博客中提到的：創(chuàng)建一個用來返回隨機元素的選擇器。你可以修改下面代碼：

(function($){

  var random = 0;

  $.expr[':'].random = function(a, i, m, r) {

    if (i == 0) {

      random = Math.floor(Math.random() * r.length);

    }

    return i == random;

  };

})(jQuery);

// This is how you use it:

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

7. 使用CSS Hooks

CSS hooks API是提供開發(fā)人員得到和設置特定的CSS數(shù)值的方法。使用它，你可以隱藏瀏覽器特定的執(zhí)行并且使用一個統(tǒng)一的界面來存取特定的屬性。

$.cssHooks['borderRadius'] = {

    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

    }

};

// Use it without worrying which property the browser actually understands:

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

更好的在于，人們已經(jīng)創(chuàng)建了一個支持CSS hooks類庫

8. 使用自定義的刪除方法

你可能聽到過jQuery的刪除插件，它能夠允許你給你的動畫添加特效。唯一的缺點是你的訪問者需要加載另外一個javascript文件。幸運的是，你可以簡單的從插件拷貝效果，并且添加到jQuery.easing對象中，如下：

$.easing.easeInOutQuad = function (x, t, b, c, d) {

  if ((t/=d/2) < 1) return c/2*t*t + b;

  return -c/2 * ((--t)*(t-2) - 1) + b;

};

// To use it:

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

9. $.proxy()

使用callback方法的缺點之一是當執(zhí)行類庫中的方法后，context被設置到另外一個元素，例如：

<div id="panel" style="display:none">

  <button>Close</button>

</div>

執(zhí)行下面代碼：

$('#panel').fadeIn(function(){

  // this points to #panel

  $('#panel button').click(function(){

    // this points to the button

    $(this).fadeOut();

  });

});

你將遇到問題，button會消失，不是panel。使用$.proxy方法，你可以這樣書寫代碼：

$('#panel').fadeIn(function(){

  // Using $.proxy to bind this:

  $('#panel button').click($.proxy(function(){

    // this points to #panel

    $(this).fadeOut();

  },this));

});

這樣才正確的執(zhí)行。$.proxy方法接受兩個參數(shù)，你最初的方法，還有context。這里閱讀更多$.proxy in the docs.。

10. 判斷頁面是否太過復雜

一個非常簡單的道理，約復雜的頁面，加載的速度越慢。你可以使用下面代碼檢查一下你的頁面內容：

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

以上代碼返回的數(shù)值越小，網(wǎng)頁加載速度越快。你可以考慮通過刪除無用多余的元素來優(yōu)化你的代碼

11. 將你的代碼轉化成jQuery插件

如果你要花一定得時間去開發(fā)一段jQuery代碼，那么你可以考慮將代碼變成插件。這將能夠幫助你重用代碼，并且能夠有效的幫助你組織代碼。創(chuàng)建一個插件代碼如下：

(function($){

  $.fn.yourPluginName = function(){

    // Your code goes here

    return this;

  };

})(jQuery);

你可以在這里閱讀更多開發(fā)教程。

12.  設置全局AJAX為缺省

如果你開發(fā)ajax程序的話，你肯定需要有”加載中“之類的顯示告知用戶，ajax正在進行，我們可以使用如下代碼統(tǒng)一管理，如下：

// ajaxSetup is useful for setting general defaults:

$.ajaxSetup({

  url      : '/ajax/',

  dataType  : 'json'

});

$.ajaxStart(function(){

  showIndicator();

  disableButtons();

});

$.ajaxComplete(function(){

  hideIndicator();

  enableButtons();

});

/*

  // Additional methods you can use:

  $.ajaxStop();

  $.ajaxError();

  $.ajaxSuccess();

  $.ajaxSend();

*/

13. 在動畫中使用delay()方法

鏈式的動畫效果是jQuery的強大之處。但是有一個忽略了的細節(jié)就是你可以在動畫之間加上delays，如下：

// 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});

jQuery動畫幫了我們大忙，否則我們得自己處理一堆的細節(jié)，設置timtout，處理屬性值，跟蹤動畫變化等等。

14. 合理利用HTML5的Data屬性

HTML5的data屬性可以幫助我們插入數(shù)據(jù)。特別合適前后端的數(shù)據(jù)交換。jQuery近來發(fā)布的data()方法，可以有效的利用HTML5的屬性，來自動得到數(shù)據(jù)。下面是個例子：

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"

  data-options='{"name":"John"}'>

</div>

為了存取數(shù)據(jù)你需要調用如下代碼：

$("#d1").data("role"); // "page"

$("#d1").data("lastValue"); // 43

$("#d1").data("hidden"); // true;

$("#d1").data("options").name; // "John";

如果你想看看實際的例子，請參考這篇教程：

HTML5+jQuery插件Quicksand實現(xiàn)超酷的星際爭霸2兵種分類展示效果：http://www.jb51.net/article/85050.htm

15. 本地存儲和jQuery

本地存儲是一個超級簡單的API。簡單的添加你的數(shù)據(jù)到localStorage全局屬性中:

localStorage.someData = "This is going to be saved across page refreshes and browser restarts";

但是對于老的瀏覽器來說，這個不是個好消息。因為他們不支持。但是我們可以使用jQuery的插件來提供支持一旦本地存儲不能用的話。這種方式可以使得本地存儲功能正常工作。

以上是我們介紹的15個jQuery的開發(fā)技巧。希望本文所述對大家jQuery程序設計有所幫助。