jQuery 是什麼？

jQuery 由 John Resig 創建於 2006 年初，對於任何使用 JavaScript 代碼的程序員來說，它是一個非常有用的 JavaScript 庫。無論您是剛剛接觸 JavaScript 語言，並且希望獲得一個能解決文檔對象模型（Document Object Model，DOM）腳本和 Ajax 開發中一些複雜問題的庫，還是作為一個厭倦了 DOM 腳本和 Ajax 開發中無聊的重複工作的資深 JavaScript 專家，jQuery 都會是您的首選。

jQuery 能幫助您保證代碼簡潔易讀。您再也不必編寫大堆重複的循環代碼和 DOM 腳本庫調用了。使用 jQuery，您可以把握問題的要點，並使用儘可能最少的代碼實現您想要的功能。

毫無疑問，jQuery 的原理是獨一無二的：它的目的就是保證代碼簡潔並可重用。當您理解並體會這一原理後，便可以開始學習本教程了，看看 jQuery 對我們的編程方式有多少改進吧。

一些簡單的代碼簡化

下面是一個簡單示例，它說明了 jQuery 對代碼的影響。要執行一些真正簡單和常見的任務，比方說為頁面的某一區域中的每個鏈接附加一個單擊（click）事件，您可以使用純 JavaScript 代碼和 DOM 腳本來實現，如 清單 1 所示。

清單 1. 沒有使用 jQuery 的 DOM 腳本

以下為引用的內容： var external_links = document.getElementById('external_links'); var links = external_links.getElementsByTagName('a'); for (var i=0;i < links.length;i++) { var link = links.item(i); link.onclick = function() { return confirm('You are going to visit: ' + this.href); }; }

清單 2 顯示了使用 jQuery 實現的相同的功能。

清單 2. 使用了 jQuery 的 DOM 腳本

以下為引用的內容： $('#external_links a').click(function() { return confirm('You are going to visit: ' + this.href); } );

是不是很神奇？ 使用 jQuery，您可以把握問題的要點，只讓代碼實現您想要的功能，而省去了一些繁瑣的過程。無需對元素進行循環，click() 函數將完成這些操作。同樣也不需要進行多個 DOM 腳本調用。您只需要使用一個簡短的字符串對所需的元素進行定義即可。

理解這一代碼的工作原理可能會有一點複雜。首先，我們使用了 $() 函數 —— jQuery 中功能最強大的函數。通常，我們都是使用這個函數從文檔中選擇元素。在本例中，一個包含有一些層疊樣式表（Cascading Style Sheet，CSS）語法的字符串被傳遞給函數，然後 jQuery 儘可能高效地把這些元素找出來。

如果您具備 CSS 選擇器的基本知識，那麼應該很熟悉這些語法。在 清單 2 中，#external_links 用於檢索 id 為 external_links 的元素。a 後的空格表示 jQuery 需要檢索 external_links 元素中的所有 <a> 元素。用英語說起來非常繞口，甚至在 DOM 腳本中也是這樣，但是在 CSS 中這再簡單不過了

$() 函數返回一個含有所有與 CSS 選擇器匹配的元素的 jQuery 對象。jQuery 對象 類似於數組，但是它附帶有大量特殊的 jQuery 函數。比方說，您可以通過調用 click 函數把 click 處理函數指定給 jQuery 對象中的所有元素。

還可以向 $() 函數傳遞一個元素或者一個元素數組，該函數將把這些元素封裝在一個 jQuery 對象中。您可能會想要使用這個功能將 jQuery 函數用於一些對象，比方說 window 對象。例如，我們通常會像下面這樣把函數分配給加載事件：

以下為引用的內容： window.onload = function() { // do this stuff when the page is done loading};

使用 jQuery 編寫的功能相同的代碼：

以下為引用的內容： $(window).load(function() { // run this when the whole page has been downloaded});

您可能有所體會，等待窗口加載的過程是非常緩慢而且令人痛苦的，這是因為必須等整個頁面加載完所有的內容，包括頁面上所有的的圖片。有的時候，您希 望首先完成圖片加載，但是在大多數情況下，您只需加載超文本標誌語言（Hypertext Markup Language，HTML）就可以了。通過在文檔中創建特殊的 ready 事件，jQuery 解決了這個問題，方法如下：

以下為引用的內容： $(document).ready(function() { // do this stuff when the HTML is all ready});

這個代碼圍繞 document 元素創建了一個 jQuery 對象，然後建立一個函數，用於在 HTML DOM 文檔就緒的時候調用實例。可以根據需要任意地調用這個函數。並且能夠以真正的 jQuery 格式，使用快捷方式調用這個函數。這很簡單，只需向 $() 函數傳遞一個函數就可以了：

以下為引用的內容： $(function() { // run this when the HTML is done downloading});

到目前以止，我已經向大家介紹了 $() 函數的三種用法。第四種方法可以使用字符串來創建元素。結果會產生一個包含該元素的 jQuery 對象。清單 3 顯示的示例在頁面中添加了一個段落。

出處-->