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

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

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

在代碼塊內部，或將其放在HTML代碼的末尾。當只有一個函數（）傳遞給$（）時，$（function（）{}）具有與$（document）.ready（function（）{}）相同的含義。

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

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

$（document）.ready（function（）{

修改為：

jQuery（函數（$）{

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

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

調用jQuery的$（）方法是非常耗費資源的，并且重復調用它是非常低效的。為了避免這種情況：

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

應該使用變量緩存jQuery對象：

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

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

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

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

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

可以替換為：

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

4. 變量命名規則

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

Var $ this=$（this）;

5. 了解DOM的屬性和方法

jQuery的目標之一是抽象DOM。理解DOM的屬性非常有用。學習jQuery最常見的錯誤之一是使用jQuery訪問DOM屬性而不學習DOM屬性。

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

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

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

6. 慣用語法創建元素

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

$（'

'，{

文本:'這是'+變量'，類':'藍色滑塊'，標題:變量，id:變量+ i}）。appendTo（obj）;

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

$（'

這是'+變量+'

“）.appendTo（OBJ）;

7. 動畫事件的回調函數

假設您要單擊一個段落，慢慢隱藏該元素，然后刪除頁面上的DOM元素。您可以使用鏈式操作來寫這個：

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

在此示例中，remove（）方法在執行fadeOut（）動畫之前執行，從而影響淡化效果并導致元素直接消失。相反，您應該使用回調函數：

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

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