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

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

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

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

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

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

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

修改為：

1. jQuery(function ($) {

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

3. 緩存jQuery對象并盡量使用鏈式操作

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

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

應(yīng)該用一個變量把jQuery對象緩存下來：

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

或者，更好的情況是使用鏈式操作減少重復(fù)：

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

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

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

可以替換為：

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

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

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

1. var $this = $(this);

5. 了解DOM的屬性和方法

jQuery的其中一個目標就是抽象DOM，了解DOM的屬性是非常有用的。學(xué)習jQuery最常犯的一個錯誤就是不學(xué)習DOM屬性而使用jQuery訪問DOM的屬性。

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

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

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

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

雖然下面兩段代碼功能基本相同，語法也沒有錯誤，但是更推薦第一種寫法 ：

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

相比之下，一個字符串拼接起來的則看起來可讀性更差：

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

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

假設(shè)你希望點擊一個段落的時候，慢慢的隱藏元素，之后刪除頁面上的該DOM元素。你可能會使用鏈式操作這么寫：

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

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

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

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