jQuery 是什么？

　　jQuery 由 John Resig 創(chuàng)建于 2006 年初，對(duì)于任何使用 JavaScript 代碼的程序員來(lái)說(shuō)，它是一個(gè)非常有用的 JavaScript 庫(kù)。無(wú)論您是剛剛接觸 JavaScript 語(yǔ)言，并且希望獲得一個(gè)能解決文檔對(duì)象模型（Document Object Model，DOM）腳本和 Ajax 開(kāi)發(fā)中一些復(fù)雜問(wèn)題的庫(kù)，還是作為一個(gè)厭倦了 DOM 腳本和 Ajax 開(kāi)發(fā)中無(wú)聊的重復(fù)工作的資深 JavaScript 專家，jQuery 都會(huì)是您的首選。

　　jQuery 能幫助您保證代碼簡(jiǎn)潔易讀。您再也不必編寫(xiě)大堆重復(fù)的循環(huán)代碼和 DOM 腳本庫(kù)調(diào)用了。使用 jQuery，您可以把握問(wèn)題的要點(diǎn)，并使用盡可能最少的代碼實(shí)現(xiàn)您想要的功能。
毫無(wú)疑問(wèn)，jQuery 的原理是獨(dú)一無(wú)二的：它的目的就是保證代碼簡(jiǎn)潔并可重用。當(dāng)您理解并體會(huì)這一原理后，便可以開(kāi)始學(xué)習(xí)本教程了，看看 jQuery 對(duì)我們的編程方式有多少改進(jìn)吧。

一些簡(jiǎn)單的代碼簡(jiǎn)化

　　下面是一個(gè)簡(jiǎn)單示例，它說(shuō)明了 jQuery 對(duì)代碼的影響。要執(zhí)行一些真正簡(jiǎn)單和常見(jiàn)的任務(wù)，比方說(shuō)為頁(yè)面的某一區(qū)域中的每個(gè)鏈接附加一個(gè)單擊（click）事件，您可以使用純 JavaScript 代碼和 DOM 腳本來(lái)實(shí)現(xiàn)，如 清單 1 所示。

　　清單 1. 沒(méi)有使用 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);
    };
}

使 Ajax 變得簡(jiǎn)單

　　使用 jQuery 將使 Ajax 變得及其簡(jiǎn)單。jQuery 提供有一些函數(shù)，可以使簡(jiǎn)單的工作變得更加簡(jiǎn)單，復(fù)雜的工作變得不再?gòu)?fù)雜。
Ajax 最常見(jiàn)的用法就是把一塊 HTML 代碼加載到頁(yè)面的某個(gè)區(qū)域中去。為此，只需簡(jiǎn)單地選擇所需的元素，然后使用 load() 函數(shù)即可。下面是一個(gè)用于更新統(tǒng)計(jì)信息的示例：

$('#stats').load('stats.html');

　　為 HTML 添加動(dòng)畫(huà)

　　可以使用 jQuery 處理基本的動(dòng)畫(huà)和顯示效果。animate() 函數(shù)是動(dòng)畫(huà)代碼的核心，它用于更改任何隨時(shí)間變化的數(shù)值型的 CSS 樣式值。比方說(shuō)，您可以變化高度、寬度、不透明度和位置。還可以指定動(dòng)畫(huà)的速度，定為毫秒或者預(yù)定義的速度：慢速，中速或快速。

　　下面是一個(gè)同時(shí)變化某個(gè)元素高度和寬度的示例。請(qǐng)注意，這些參數(shù)沒(méi)有開(kāi)始值，只有最終值。開(kāi)始值取自元素的當(dāng)前尺寸。同時(shí)我也附加了一個(gè)回調(diào)函數(shù)。

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
    alert('The element is done growing!');
});

　　釋放 jQuery 選擇器的強(qiáng)大能量

　　我們經(jīng)常會(huì)使用 ID 來(lái)選擇元素，比如 #myid，或者通過(guò)類名，比如 div.myclass 來(lái)選擇元素。然而，jQuery 提供了更為復(fù)雜和完整的選擇器語(yǔ)法，允許我們?cè)趩蝹€(gè)選擇器中選擇幾乎所有的元素組合。

　　jQuery 的選擇器語(yǔ)法主要是基于 CSS3 和 XPath 的。對(duì) CSS3 和 XPath 了解的越多，使用 jQuery 時(shí)就越加得心應(yīng)手。有關(guān) jQuery 選擇器的完整列表，包括 CSS 和 XPath，請(qǐng)參閱 參考資料 中的鏈接。

　　CSS3 包含一些并不是所有瀏覽器都支持的語(yǔ)法，因此我們很少使用它。然而，我們?nèi)匀豢梢栽?jQuery 中使用 CSS3 選擇元素，因?yàn)?jQuery 具備自己的自定義選擇器引擎。比方說(shuō)，要在表格中的每一個(gè)空列中都添加一個(gè)橫杠，可以使用：:empty 偽選擇器（pseudo-selector）：

$('td:empty').html('-');

NET技術(shù)：使用 jQuery 簡(jiǎn)化 Ajax 開(kāi)發(fā)，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。