【jQuery類庫】jQuery()函式
jQuery類庫
JavaScript的核心API設計得很簡單，但由於瀏覽器之間的嚴重不相容性，導致客戶端的API過於複雜。IE9的到來，緩解了這種不相容性導致的糟糕境況，然而使用JavaScript框架或工具類庫，能簡化通用操作，能隱藏瀏覽器之間的差異，這讓很多程式設計師在開發Web應用時變得更簡單。
jQuery類庫如此廣泛地使用，作為Web開發者，我們必須熟悉它：即便沒有在自己的程式碼中使用它，也很有可能在他人寫的程式碼中遇見。幸運的是，jQuery足夠小巧和穩定。
jQuery能讓你在文件中輕鬆找到關心的元素，並對這些元素進行操作：新增內容、編輯HTML屬性和CSS屬性、定義事件處理程式，以及執行動畫。它還擁有Ajax工具來動態發起HTTP請求，以及一些通用的工具函式來操作物件和陣列。
正如其名，jQuery類庫聚焦於査詢。一個典型査詢使用CSS選擇器來識別一組文件元素，並返回一個物件來表示這些元素。返回的物件提供了大量有用的方法來批量操作匹配的元素。這些方法會盡可能返回呼叫物件本身，這使得簡潔的鏈式呼叫成為可能。jQuery如此強大和好用，關鍵得益於以下特性：
- 豐富強大的語法（CSS選擇器），用來査詢文件元素
- 高效的査詢方法，用來找到與CSS選擇器匹配的文件元素集
- 一套有用的方法，用來操作選中的元素
- 強大的函數語言程式設計技巧，用來批量操作元素集，而不是每次只操作單個
- 簡潔的語言用法（鏈式呼叫），用來表示一系列順序操作
jQuery 基礎
jQuery類庫定義了一個全域性函式：
jOuery()。該函式使用頻繁，因此在類庫中還給它定義了一個快捷別名：$。這是jQuery在全域性名稱空間中定義的唯一兩個變數。如果你在自己的程式碼中有使用$作為變數，或者引入了Prototype等使用$作為全域性變數的
類庫，這時，為了避免衝突，可以呼叫jQuery.noConflict()來釋放$變數，讓其指向原始值。
這個擁有兩個名字的全域性方法是jQuery的核心査詢方法。例如，下面的程式碼能獲取文件中的所有
<div>元素：var divs = $(ndivn);該方法返回的值表示零個或多個DOM元素，這就是jQuery物件。注意：jQuery。是工廠函式，不是建構函式，它返回一個新建立的物件，但並沒有和new關鍵字一起使用。
jQuery物件定義了很多方法，可以用來操作它們表示的這組元素，本章中的大部分文字 將用來闡釋這些方法。例如，下面這段程式碼可以用來找到所有擁有details類的p元素，將 其高亮顯示，並將其中隱藏的p元素快速顯示出來：
$("p.details").css("background-color", "yellow").show("fast");
上面的
css()方法操作的jQuery物件是由$()返回的，css()方法返回的也是這個物件，因此可以繼續呼叫show()方法，這就是鏈式呼叫，很簡潔緊湊。在jQuery程式設計中，鏈式調 用這個習慣用語很普遍。再舉個例子，下面的程式碼可以找到文件中擁有“clicktohide”CSS類的所有元素，並給每一個元素都註冊一個事件處理函式。當用戶單擊元素時，會呼叫事件處理程式，使得該元素緩慢向上收縮，最終消失：$(".clicktohide").click(function() ( $(this).slideUp("slow"); });
獲取jQuery
jQuery類庫是免費軟體，可以從 http://jquery.com 下載該軟體。下載後，像下面這樣 通過
<script>元素在Web頁面中引入：<script src="jquery-1.4.2.min.js"></script>檔名中的“min”表示引入的是壓縮版本的類庫，已經去除不必要的註釋和空格，變數名等內部識別符號也替換成了更短的名字。
在Web應用中引入jQuery的另一個方式是使用內容分發網路，比如以下URL地址：
http://code.jquery.eom/jquery-l.4.2.min.js http://ajax.microsoft.eom/ajax/jquery/jquery-l.4.2.min.js http://ajax.googleapis.eom/ajax/libs/jquery/l.4.2/jquery.min.js這裡用的是jQuery1.4版本。如果使用的是其他版本，在必要時請替換上面URL中的版本號“1.4.2”。如果使用Google CDN，可以用“1.4”來獲取1.4.x系列中的最新版本，或者用“1”來獲取版本號小於“2.0”的最新版本。通過上面這些眾所周知的URL來載入jQuery的最大好處是，因為jQuery很流行，訪問你的網站的使用者，很有可能在訪問其他網站時，已經下載過jQuery類庫，儲存在瀏覽器快取中，無須重新下載了。
jQuery()函式
在jQuery類庫中，最重要的方法是jOuery()方法（也就是
$()）。它的功能很強大，有4種不同的呼叫方式。
第一種也是最常用的呼叫方式是傳遞css選擇器（字串）給
$()方法。當通過這種方式呼叫時，$()方法會返回當前文件中匹配該選擇器的元素集。jQuery支援大部分CSS3擇器語法，還支援一些自己的擴充套件語法。還可以將一個元素或jQuery物件作為第二引數傳遞給$()方法，這時返回的是該特定元素或元素集的子元素中匹配選擇器的部分。這第二引數是可選的，定義了元素查詢的起始點，經 常稱為上下文（context）。
第二種呼叫方式是傳遞一個Element，Document或Window物件給
$()方法。在這種情況 下，$()方法只須簡單地將該Element、Document或Window物件封裝成jQuery物件並返回。這樣可以使得能用jQuery方法來操作這些元素而不用使用原生DOM方法。例如，在jQuery程式中，經常可以看見$(document)或$(this)。jQuery物件可以表示文件中的多個元素，也可以傳遞一個元素陣列給$()方法。在這種情況下，返回的jQuery物件表示該陣列中的元素集。
第三種呼叫方式是傳遞HTML文字字串給
$()方法。在這種呼叫方式下，jQuery會根據傳入的文字建立好HTML元素並封裝為jQuery物件返回。
通過第三種方式呼叫時，
$()接受可選的第二引數。可以傳遞Document物件來指定與所建立元素相關聯的文件。（比如，當建立的元素需要插入iframe裡時，需要顯式指定該iframe的document物件。）第二引數還可以是object物件。此時，假設該物件的屬性表示HTML屬性的鍵/值對，這些屬性將設定到所建立的物件上。當第二引數物件的屬性名是“css”、“html”、“text”、“width”、“height”、“offset”、“val”或“data”，或者屬性名是jQuery事件處理程式註冊方法名時，jQuery將呼叫新建立元素上的同名方法，並傳入屬性值。例如：var img = $("<img/>", // 新建一個<img>元素 { src:url, // 具有HTML屬性 css: {borderWidth：5}, // CSS樣式 click: handleClick // 和事件處理程式 });
最後，第4種呼叫方式是傳入一個函式給
$()方法。此時，當文件載入完畢且DOM可操作時，傳入的函式將被呼叫。
有時還可以看見
$(f)的老式和完整寫法：$(document).ready(f)。
傳給
jQuery()的函式在被呼叫時，this指向document物件，唯一的引數指向jQuery函 數。這意味著可以釋放全域性的$()函式，但在內部依舊可以延續該習慣：jQuery.noConflict(); // 還原$()為初始值 jQuery(function($)，{ // 讓$()成為jQuery物件的區域性別名 // jQuery程式碼放在這裡 });
通過
$()註冊的函式將在DOMContentLoaded事件觸發時由jQurey觸發。當瀏覽器不支援該事件時，會在load事件觸發時由jQurey觸發。這意味著文件已經解析完畢，但圖片等外部資源有可能還未載入。如果在DOM準備就緒後再傳遞函式給$()，傳遞的函式會在$()返回之前立刻呼叫。
jQuery類庫還使用
jQuery()函式作為其名稱空間，在下面定義了不少工具函式和屬性。上面提到過的jQuery.noConflict()就是其中一個工具函式。還包括用於通用遍歷的 jQuery.each()，以及用來解析JSON文字的jQuery.parseJSON()。
jQuery術語
jQuery函式
jQuery函式是jQuery或
$()的值。該函式可以用來建立jQuery物件，用來註冊DOM就緒時需要呼叫的處理程式，還用做jQuery名稱空間。我通常用$()來引用它。它可以用做名稱空間，因此jQuery函式也可稱為“全域性jQuery物件”，但要注意千萬別把它與“jQuery物件”混淆。jQuery物件
jQuery物件是由jQuery函式返回的物件。一個jQuery物件表示一組文件元素，也叫做“jQuery結果”、“jQdery集”或“包裝集”。
選中元素
當傳遞CSS選擇器給jQuery函式時，它返回的jQuery物件表示匹配該選擇器的文件元素集。在描述jQuery物件的方法時，我經常會使用“選中元素”這個說法，用來指代這些匹配的元素。例如，為了解釋
attr()方法，我會用
“attr()方法給選中元素設定HTML屬性”，用來替代更精確但很冗長的描
述："attr()方法給呼叫它時所在的jQuery物件的元素設定HTML屬性”。注意“選中”是指CSS選擇器，與使用者執行的操作沒有任何關係。jQuery函式
jQuery函式指定義在jQuery名稱空間中的函式，比如
jQuery.noConflict()。jQuery函式也可稱為“靜態方法”。jQuery方法
jQuery方法是由jQuery函式返回的jQuery物件的方法。jQuery類庫最重要的部分就是它定義的這些強大的方法。
jQuery函式和jQuery方法有時很難區分，因為有部分函式和方法的名稱是一樣的。注意下面這兩行程式碼的差異：
// jOuery的each()函式用來 // 對陣列a中的每一個元素都呼叫一次函式f $.each(a,f); // 呼叫jQuery()函式獲取表示文件中所有元素的jQuery物件 // 然後呼叫該jQurey物件的each()方法 // 對選中的每一個元素呼叫一次函式f $("a").each(f); *http://jquery.com* 中的jQuery官方文件使用類似`$.each`的命名來表示jQuery函式，用類似`.each`（帶點號但不帶美元符號）的命名來表示jQuery方法。一般情況下，根據討論的上下文可以清晰地區分開。