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

如果您的代碼正在操作DOM元素，請記住將代碼放在

中 $（document）.ready（function（）{.}）;

在代碼塊內(nèi)部，或?qū)⑵浞旁贖TML代碼的末尾。當(dāng)只有一個函數(shù)（）傳遞給$（）時，$（function（）{}）具有與$（document）.ready（function（）{}）相同的含義。

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

如果您的代碼與另一個使用$ syntax的框架沖突，請記住使用$ .noConflict（）;方法并把代碼

$（document）.ready（function（）{

修改為：

jQuery（函數(shù)（$）{

或者你可以定義$ jq=jQuery.noConflict（）;然后使用$ jq。

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

調(diào)用jQuery的$（）方法是非常耗費(fèi)資源的，并且重復(fù)調(diào)用它是非常低效的。為了避免這種情況：

$（'。test'）。addClass（'hello'）; $（'。test'）。css（'color'，'orange'）; $（'。test'）。prop（'title'，'Hello世界'）;

應(yīng)該使用變量緩存jQuery對象：

Var $ test=$（'。test'）; $ test.addClass（'hello'）; $ test.css（'color'，'orange'）; $ test.prop（'title'，'Hello world'） ;

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

$（'。test'）。addClass（'hello'）。css（'color'，'orange'）。prop（'title'，'Hello world'）;

同時，許多函數(shù)支持將多個值放入對象，然后調(diào)用它們一次以更改多個值，例如：

$（'。test'）。css（'color'，'orange'）。css（'background-color'，'blue'）;

可以替換為：

$（'。test'）。css（{'color':'apple'，'background-color':'blue'}）;

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

jQuery變量通常以$開頭，以區(qū)別于普通的JavaScript變量。

Var $ this=$（this）;

5. 了解DOM的屬性和方法

jQuery的目標(biāo)之一是抽象DOM。理解DOM的屬性非常有用。學(xué)習(xí)jQuery最常見的錯誤之一是使用jQuery訪問DOM屬性而不學(xué)習(xí)DOM屬性。

$（'img'）。click（function（）{$（this）.attr（'src'）; //Bad！}）;

在上面的代碼中，這指向click事件中綁定的元素。這段代碼很慢而且冗長。以下代碼可以實現(xiàn)相同的功能，代碼更短，更快，更易讀：

$（'img'）。click（function（）{this.src; //很多，好多了}）;

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

雖然以下兩段代碼函數(shù)基本相同，但語法沒有錯，但建議使用第一段：

$（'

'，{

文本:'這是'+變量'，類':'藍(lán)色滑塊'，標(biāo)題:變量，id:變量+ i}）。appendTo（obj）;

相反，拼接在一起的字符串看起來不太可讀：

$（'

這是'+變量+'

“）.appendTo（OBJ）;

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

假設(shè)您要單擊一個段落，慢慢隱藏該元素，然后刪除頁面上的DOM元素。您可以使用鏈?zhǔn)讲僮鱽韺戇@個：

$（'p'）。click（function（e）{$（this）.fadeOut（'slow'）。remove（）;}）;

在此示例中，remove（）方法在執(zhí)行fadeOut（）動畫之前執(zhí)行，從而影響淡化效果并導(dǎo)致元素直接消失。相反，您應(yīng)該使用回調(diào)函數(shù)：

$（'p'）。click（function（e）{$（this）.fadeOut（'slow'，function（）{$（this）.remove（）;}）;}）;

fadeOut（）的第二個參數(shù)是一個匿名函數(shù)，只在fadeOut（）動畫執(zhí)行完畢后執(zhí)行一次。這將實現(xiàn)淡入淡出效果，然后刪除元素。