使用jQuery簡化Ajax開發
2024-09-01 08:29:24
供稿：網友
學習 jQuery 基本原理，探索其特性和功能，執行一些常見的 Ajax 任務并掌握如何使用插件擴展 jQuery。
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 中這再簡單不過了
