1. 記得使用 $(document).ready

如果你的代碼是操作某個(gè)DOM元素的，則記得把代碼放到

1. $(document).ready(function () { ... });

代碼塊內(nèi)，或者把它放在HTML代碼的末尾。當(dāng)只有一個(gè) function() 傳遞給 $() 的時(shí)候， $(function () {}) 與 $(document).ready(function () {}) 意思一樣。

2. 使用 $.noConflict(); 或者給 jQuery 重命名，如：$jq

如果你的代碼與另一個(gè)使用 $ 語(yǔ)法的框架沖突，則記得使用 $.noConflict(); 方法，并且把代碼

1. $(document).ready(function () {

修改為：

1. jQuery(function ($) {

或者你也可以定義 $jq = jQuery.noConflict(); ，然后使用 $jq 。

3. 緩存jQuery對(duì)象并盡量使用鏈?zhǔn)讲僮?/h2>

調(diào)用jQuery的 $() 方法的非常消耗資源的，重復(fù)調(diào)用它則會(huì)非常低效。要避免這樣的情況：

1. $('.test').addClass('hello');
2. $('.test').css('color', 'orange');
3. $('.test').prop('title', 'Hello world');

應(yīng)該用一個(gè)變量把jQuery對(duì)象緩存下來(lái)：

1. var $test = $('.test');
2.  
3. $test.addClass('hello');
4. $test.css('color', 'orange');
5. $test.prop('title', 'Hello world');

或者，更好的情況是使用鏈?zhǔn)讲僮鳒p少重復(fù)：

1. $('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world');

同時(shí)，很多函數(shù)支持把多個(gè)值放入一個(gè)對(duì)象，然后調(diào)用一次來(lái)改變多個(gè)值，如：

1. $('.test').css('color', 'orange').css('background-color', 'blue');

可以替換為：

1. $('.test').css({ 'color': 'orange', 'background-color': 'blue' });

4. 變量命名規(guī)則

jQuery變量一般用 $ 開(kāi)頭，以便和普通的JavaScript變量區(qū)分開(kāi)來(lái)。

1. var $this = $(this);

5. 了解DOM的屬性和方法

jQuery的其中一個(gè)目標(biāo)就是抽象DOM，了解DOM的屬性是非常有用的。學(xué)習(xí)jQuery最常犯的一個(gè)錯(cuò)誤就是不學(xué)習(xí)DOM屬性而使用jQuery訪問(wèn)DOM的屬性。

1. $('img').click(function () {
2. $(this).attr('src'); // Bad!
3. });

上面的代碼中， this 指向的是 click 事件中綁定的元素。這段代碼執(zhí)行緩慢而且冗長(zhǎng)。下面的代碼可以實(shí)現(xiàn)相同的功能，并且代碼更短、執(zhí)行更快、可讀性更強(qiáng)：

1. $('img').click(function () {
2. this.src; // Much, much better
3. });

6. 慣用語(yǔ)法創(chuàng)建元素

雖然下面兩段代碼功能基本相同，語(yǔ)法也沒(méi)有錯(cuò)誤，但是更推薦第一種寫(xiě)法 ：

1. $('<p>', {
2. text: 'This is a ' + variable,
3. "class": 'blue slider',
4. title: variable,
5. id: variable + i
6. }).appendTo(obj);

相比之下，一個(gè)字符串拼接起來(lái)的則看起來(lái)可讀性更差：

1. $('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj);

7. 動(dòng)畫(huà)事件的回調(diào)函數(shù)

假設(shè)你希望點(diǎn)擊一個(gè)段落的時(shí)候，慢慢的隱藏元素，之后刪除頁(yè)面上的該DOM元素。你可能會(huì)使用鏈?zhǔn)讲僮鬟@么寫(xiě)：

1. $("p").click(function(e) {
2. $(this).fadeOut("slow").remove();
3. });

該例子中， remove() 方法會(huì)在 fadeOut() 動(dòng)畫(huà)執(zhí)行完之前就執(zhí)行，影響漸隱的效果而使元素直接消失。相反的，你應(yīng)該使用回調(diào)函數(shù)：

1. $("p").click(function(e){
2. $(this).fadeOut("slow", function(){
3. $(this).remove();
4. });
5. });

fadeOut() 的第二個(gè)參數(shù)是一個(gè)匿名函數(shù)，只會(huì)在 fadeOut() 動(dòng)畫(huà)執(zhí)行完之后執(zhí)行一次。這樣就可以實(shí)現(xiàn)漸隱的效果，然后刪除元素。