jQuery 是什么？使用 jQuery 簡(jiǎn)化 Ajax 開發(fā)

jQuery 由 John Resig 創(chuàng)建于 2006 年初，對(duì)于任何使JavaScript 代碼的程序員來說，它是一個(gè)非常有用的 JavaScript 庫(kù)。無論您是剛剛接觸 JavaScript 語言，并且希望獲得一個(gè)能解決文檔對(duì)象模型（Document Object Model，DOM）腳本和 Ajax 開發(fā)中一些復(fù)雜問題的庫(kù)，還是作為一個(gè)厭倦了 DOM 腳本和 Ajax 開發(fā)中無聊的重復(fù)工作的資深 JavaScript 專家，jQuery 都會(huì)是您的首選。
jQuery 能幫助您保證代碼簡(jiǎn)潔易讀。您再也不必編寫大堆重復(fù)的循環(huán)代碼和 DOM 腳本庫(kù)調(diào)用了。使用 jQuery，您可以把握問題的要點(diǎn)，并使用盡可能最少的代碼實(shí)現(xiàn)您想要的功能。

毫無疑問，jQuery 的原理是獨(dú)一無二的：它的目的就是保證代碼簡(jiǎn)潔并可重用。當(dāng)您理解并體會(huì)這一原理后，便可以開始學(xué)習(xí)本教程了，看看 jQuery 對(duì)我們的編程方式有多少改進(jìn)吧。

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

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

清單 2. 使用了 jQuery 的 DOM 腳本
$('#external_links a').click(function() {    return confirm('You are going to visit: ' + this.href);});

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

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

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

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

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

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

您可能有所體會(huì)，等待窗口加載的過程是非常緩慢而且令人痛苦的，這是因?yàn)楸仨毜日麄€(gè)頁面加載完所有的內(nèi)容，包括頁面上所有的的圖片。有的時(shí)候，您希望首先完成圖片加載，但是在大多數(shù)情況下，您只需加載超文本標(biāo)志語言（Hypertext Markup Language，HTML）就可以了。通過在文檔中創(chuàng)建特殊的 ready 事件，jQuery 解決了這個(gè)問題，方法如下：

$(document).ready(function() {   // do this stuff when the HTML is all ready}); 

這個(gè)代碼圍繞 document 元素創(chuàng)建了一個(gè) jQuery 對(duì)象，然后建立一個(gè)函數(shù)，用于在 HTML DOM 文檔就緒的時(shí)候調(diào)用實(shí)例。可以根據(jù)需要任意地調(diào)用這個(gè)函數(shù)。并且能夠以真正的 jQuery 格式，使用快捷方式調(diào)用這個(gè)函數(shù)。這很簡(jiǎn)單，只需向 $() 函數(shù)傳遞一個(gè)函數(shù)就可以了：

$(function() {  // run this when the HTML is done downloading}); 

到目前以止，我已經(jīng)向大家介紹了 $() 函數(shù)的三種用法。第四種方法可以使用字符串來創(chuàng)建元素。結(jié)果會(huì)產(chǎn)生一個(gè)包含該元素的 jQuery 對(duì)象。清單 3 顯示的示例在頁面中添加了一個(gè)段落。

清單 3. 創(chuàng)建和附加一個(gè)簡(jiǎn)單的段落

 $('
 
')  .html('Hey World!')  .css('background', 'yellow')  .appendTo("body"); 

在前一個(gè)例子中您可能已經(jīng)注意到，jQuery 中的另一個(gè)功能強(qiáng)大的特性就是方法鏈接（method chaining）。每次對(duì) jQuery 對(duì)象調(diào)用方法時(shí)，方法都會(huì)返回相同的 jQuery 對(duì)象。這意味著如果您需要對(duì) jQuery 對(duì)象調(diào)用多個(gè)方法，那么您不必重新鍵入選擇器就可以實(shí)現(xiàn)這一目的：

$('#message').css('background', 'yellow').html('Hello!').show(); 

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)