使用jQuery簡化Ajax開發：看看Ajax和DOM指令碼編程究竟有多簡單

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　
});