使用jQuery簡化Ajax開發——Ajax開發入門[1]

jQuery是一個可以簡化 JavaScript™以及AJAX（Asynchronous JavaScript + XML，非同步Javascript和XML）編程的Javascript庫。不同於其他的Javascript庫，jQuery有他自己的哲學，使你可以很簡單的編寫代碼。這篇文章就會帶領你見識一下jQuery的哲學，探討一下他的特性以及功能，並且會做一些ajax的樣本，以及如何使用plug-in（外掛程式）來擴充jQuery。

1. 什麼是jQuery？

jQuery是個很優秀的Javascript庫，它誕生於2006年，出自John Resig之手。不管你是一個javascript新手，但是卻想嘗試一下DOM（Document Object Model）以及Ajax的繁雜，抑或你是個javascript專家級人物，但是已經厭倦了反覆的重複那無味的DOM以及Ajax指令碼，jQuery都將是你的不二選擇。

jQuery會協助你保持代碼的簡單和簡潔。你不必再去寫一大堆重複的迴圈或者是DOM呼叫指令碼，使用jQuery，你將很快找到關鍵點，並且可以以最少的代碼錶達你的思想。

jQuery的哲學其實很單一：簡單、可重用。當你理解並且認同這種思想的時候，你就可以開始體會一下使用jQuery能讓你的編程變得多麼輕鬆愉快了！

2. 一些簡單概念

這裡是個簡單的例子，向你展示jQuery如何影響你編寫的代碼。做的事情其實很簡單，比如對頁面上某一地區內的所有連結都添加一個click響應事件，你可以使用一般的Javascript以及DOM來寫，代碼見Listing1：

Listing 1. DOM scripting without jQuery

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

如果使用jQuery的話實現如下：

Listing 2. DOM scripting with jQuery

$('#external_links a').click(function() {
　　return confirm('You are going to visit: ' + this.href);
});

很驚訝，是吧？使用jQuery的話，你可以很快找到關鍵點，並且只需要表達你需要表達的，

而不需要羅裡羅嗦。不需要對這些元素進行迴圈，click()函數可以處理好這一切。而且你不要謝太多的操作DOM的代碼，

你需要的僅僅是使用很少的字元定義你要找的那個元素。

來看一下這段代碼是如何工作的，有點小技巧。首先，看到$()函數--jQuery裡最有用的最強大的函數.大部分情況下,

你使用這個函數從文檔中選擇元素.在這個例子中,使用這個函數傳遞帶有一些階層式樣式表(Cascading Style Sheets,CSS)

文法的字串,jQuery可以很方便的找到這個元素.

如果你懂一點基本的CSS選擇符的只是,我想這個文法應該看起來相當熟悉.在Listing2中,#external_links用來尋找帶有id為

external_links的元素.接下來的空格表示jQuery要找到在#external_links元素內的所有的<a>元素.用口語開表達的話有點費勁--

用DOM指令碼來寫也挺麻煩,不過,在CSS裡,沒有比這個更簡單的了.$()函數返回一個包含與css選擇符匹配的所有元素的一個jQuery對象. jQuery對象的概念就像是數組,但是它可能含有許多jQuery函數. 舉例來說,你可以調用click函數來綁定一個click事件響應到jQuery對象中的每個元素上.

你還可以向$()函數傳遞一個元素或者是元素的數組,它將把所有的元素打包成一個jQuery對象.你可能想要把這一特性應用到象視窗對象上面.舉例來說, 你有可能使用此函數來載入事件,像這樣:

window.onload = function() {
　　// do this stuff when the page is done loading
};