我的第一個jQuery程序搭建并測試jQuery開發(fā)環(huán)境1.1jQuery簡介1.2jQuery的優(yōu)勢1.3jQuery運(yùn)行環(huán)境單元總結(jié)

1.1jQuery簡介

對于客戶端Web開發(fā)來說，JavaScript框架已經(jīng)成為非常有用的必備組件，而jQuery是一個優(yōu)秀的輕量級JavaScript庫。jQuery是由JohnResig于2006年1月創(chuàng)建的開源項目，堪稱動態(tài)Web應(yīng)用程序領(lǐng)域的編程利器，它能幫助Web開發(fā)者利用更少的代碼完成更多的工作，從而有效減少錯誤數(shù)量。

jQuery將JavaScript編程量精簡為寥寥數(shù)行代碼，使JavaScript變得更直觀，更富魅力。jQuery還能夠為一個或同時為多個元素設(shè)置樣式，使得通過JavaScript操縱CSS變得分外輕松。

另外，jQuery創(chuàng)建了與W3C標(biāo)準(zhǔn)非常類似的跨瀏覽器事件API，并添加了一些原創(chuàng)的、非常有用的擴(kuò)展，在很大程度上消除了IE瀏覽器和W3C標(biāo)準(zhǔn)在事件API中的不一致性，即解決了IE瀏覽器和其他瀏覽器之間的JavaScript代碼不兼容問題。

1.2jQuery的優(yōu)勢

jQuery具有以下優(yōu)勢：(1)?輕量級。jQuery運(yùn)行庫非常輕巧，只需要在頁面中引用運(yùn)行庫?.js文件就能使用，而運(yùn)行庫.js文件的大小不到30?KB。

(2)?強(qiáng)大的選擇器。

jQuery允許開發(fā)者使用從CSS1到CSS3幾乎所有的選擇器，以及jQuery獨(dú)創(chuàng)的高級而復(fù)雜的選擇器。另外，還可以加入插件使其支持XPath選擇器，開發(fā)者甚至可以編寫屬于自己的選擇器。由于jQuery支持選擇器這一特性，因此有一定CSS經(jīng)驗的開發(fā)人員可以很容易地切入到j(luò)Query的學(xué)習(xí)中來。

(3)?出色的DOM操作封裝。

jQuery封裝了大量常用的DOM操作，使開發(fā)者在編寫DOM操作相關(guān)程序的時候得心應(yīng)手。利用jQuery能夠輕松地完成各種原本非常復(fù)雜的操作，讓JavaScript新手也能寫出出色的程序。

(4)?可靠的事件處理機(jī)制。

jQuery的事件處理機(jī)制吸收了JavaScript專家DeanEdwards編寫的事件處理函數(shù)的精華，使得jQuery在處理事件綁定的時候相當(dāng)可靠。在預(yù)留退路(gracefuldegradation)、循序漸進(jìn)以及非入侵式(Unobtrusive)編程思想方面，jQuery也做得非常不錯。

(5)?完善的Ajax。

jQuery將所有的Ajax操作封裝到一個函數(shù)$.ajax()里，使得開發(fā)者處理Ajax的時候能夠?qū)Ｐ奶幚順I(yè)務(wù)邏輯而無須關(guān)心復(fù)雜的瀏覽器兼容性和XMLHttpRequest對象的創(chuàng)建與使用問題。

(6)?不污染頂級變量。

jQuery只建立一個名為jQuery的對象，其所有的函數(shù)方法都在這個對象之下。其別名$也可以隨時交出控制權(quán)，絕對不會污染其他的對象。該特性使jQuery可以與其他JavaScript庫共存，在項目中放心地引用而不需要考慮后期可能的沖突。

(7)?出色的瀏覽器兼容性。

作為一個流行的JavaScript庫，瀏覽器的兼容性是必須具備的條件之一。jQuery能夠在IE6.0+、FF2+、Safari2.0+和Opera9.0+下正常運(yùn)行。同時，jQuery修復(fù)了一些瀏覽器之間的差異，使開發(fā)者不必在開展項目前建立瀏覽器兼容庫。

(8)?鏈?zhǔn)讲僮鞣绞健?/p>

jQuery中最有特色的莫過于它的鏈?zhǔn)讲僮鞣绞剑磳Πl(fā)生在同一個jQuery對象上的一組動作，可以直接連寫而無須重復(fù)獲取對象。這一特點(diǎn)使jQuery的代碼無比優(yōu)雅與簡潔。

比如下面的代碼，JavaScript的功能為找到所有CSS類名(class='highlight')為highlight的tr元素，將類名修改為normal，代碼行為為去掉表格行的高亮背景：

lettr=document.getElementsByTagName('tr');

letlen=tr.length;

for(leti=0;i<len;i++){

if(tr[i].class==='highlight'){

tr[i].class='normal';

}

}

代碼數(shù)量雖然不是很多，但實現(xiàn)了所需要的功能。如果采用jQuery來實現(xiàn)，則可以更加簡捷，只需一行代碼：

$('tr.highlight').removeClass('highlight').addClass('normal');

上面的代碼采用鏈?zhǔn)讲僮鞣绞酵瓿闪巳齻€動作，執(zhí)行的順序是從左往右，依次完成操作：

?找到class='highlight'的所有tr元素；

?移除所有找到的元素的class中的highlight值(一個元素可能有多個class值)；

?為所有找到的元素添加新的class值normal。

(9)?隱式迭代。

上面的代碼中，當(dāng)用jQuery找到所有class='highlight'的tr元素后，無須循環(huán)遍歷每一個返回的元素。相反，jQuery里的方法都被設(shè)計成自動操作對象集合，而不是單獨(dú)的對象，這使得大量的循環(huán)結(jié)構(gòu)變得不再必要，從而大幅地減少了代碼量。

(10)?行為層與結(jié)構(gòu)層的分離。

開發(fā)者可以使用jQuery選擇器選中元素，然后直接給元素添加事件。這種將行為層與結(jié)構(gòu)層完全分離的思想，可以使jQuery開發(fā)人員和HTML或其他頁面開發(fā)人員各司其職，擺脫過去開發(fā)沖突或個人單干的開發(fā)模式。同時，后期維護(hù)也非常方便，不需要在HTML代碼中尋找某些函數(shù)和重復(fù)修改HTML代碼。

(11)?豐富的插件支持。

jQuery的易擴(kuò)展性，吸引了來自全球的開發(fā)者來編寫jQuery的擴(kuò)展插件。目前已經(jīng)有超過幾百種的官方插件支持，而且還不斷有新插件面世。

(12)?完善的文檔。

jQuery的文檔非常豐富，現(xiàn)階段多為英文文檔，中文文檔相對較少。很多熱愛jQuery的團(tuán)隊都在努力完善jQuery的中文文檔，例如jQuery的中文API，圖靈教育翻譯的《Learning?jQuery》等。

(13)?開源。

jQuery是一個開源的產(chǎn)品，任何人都可以自由地使用并提出改進(jìn)意見。

1.3jQuery運(yùn)行環(huán)境

1.?jQuery版本目前，jQuery共有三個版本，在jQuery官網(wǎng)(/)可以查看，分別以1.X、2.X、3.X為代號，如目前最新的jQuery版本為3.5.1。各版本之間的對比如表1-1所示。

jQuery從1.X版本發(fā)展至現(xiàn)在的3.X版本，經(jīng)歷的版本數(shù)量不少于60個，每個版本下載時可以選擇compressed(壓縮)和uncompressed(未壓縮)兩種類型，如表1-2所示。

2.?jQuery庫文件下載

本書選擇的jQuery運(yùn)行庫版本為1.X的最終版本1.12.4。我們可以到j(luò)Query官網(wǎng)(/)進(jìn)行下載，或直接輸入官網(wǎng)提供的下載地址進(jìn)行下載。以下為從jQuery官網(wǎng)下載jQuery1.12.4運(yùn)行庫的詳細(xì)步驟。

(1)?打開jQuery官網(wǎng)(/)，點(diǎn)擊右上方“DownloadjQuery”按鈕進(jìn)入下載頁面，如圖1-1所示。圖1-1jQuery庫文件下載步驟一

(2)?在下載頁面中，首先看到的是jQuery最新版本(3.5.1)的下載鏈接，如圖1-2所示。圖1-2jQuery庫文件下載步驟二

(3)?將頁面拖動到最下方，可以看到PastReleases(過去版本)，點(diǎn)擊“jQueryCDN”超鏈接，進(jìn)入過去版本CDN頁面，如圖1-3所示。

(4)?在過去版本CDN頁面中，可以看到“SeeallversionsofjQueryCore”(查看jQuery內(nèi)核所有版本)鏈接，點(diǎn)擊后可進(jìn)入查看所有版本頁面，如圖1-4所示。圖1-3jQuery庫文件下載步驟三圖1-4jQuery庫文件下載步驟四

(5)?在查看所有版本頁面中，找到目標(biāo)版本“jQuery?Core1.12.4”，此處提供了兩種下載類型，uncompressed為未壓縮版，minified為壓縮版(即compressed精簡版)，如圖1-5所示。圖1-5jQuery庫文件下載步驟五

(6)?點(diǎn)擊“uncompressed”超鏈接，可以打開官方提供的CDN，直接點(diǎn)擊右側(cè)的“復(fù)制”按鈕將CDN代碼復(fù)制到HTML頁面中進(jìn)行引用。如果想要下載該版本jQuery庫文件，則選擇并復(fù)制src值的內(nèi)容，粘貼到瀏覽器地址欄中打開，如圖1-6所示。圖1-6jQuery庫文件下載步驟六

(7)?復(fù)制圖1-6中src值的內(nèi)容，粘貼到瀏覽器地址欄中，或者在瀏覽器地址欄中輸入src值的內(nèi)容，打開后可以查看jQuery1.12.4版本的源代碼，如圖1-7所示。圖1-7jQuery庫文件下載步驟七

(8)?在本地創(chuàng)建一個.js文件，命名為“jquery-1.12.4.js”，使用記事本打開文件，并將以上頁面中的內(nèi)容復(fù)制到文件中保存即可，如圖1-8所示。圖1-8jQuery庫文件下載步驟八

3.?jQueryCDN

如果不想在本地下載jQuery運(yùn)行庫文件，可以在CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))中引用。通過遍布全球的服務(wù)器托管的jQuery運(yùn)行庫，CDN可以提供性能優(yōu)勢。如果網(wǎng)頁的訪問者已經(jīng)從同一個CDN下載了一份jQuery的副本，那么無須重新下載，可以免去下載jQuery庫文件的時間。以使用最廣泛的1.11.3壓縮版本為例，可以通過以下代碼引用jQuery庫文件：

4.?jQuery版本選擇

jQuery版本從1.X至3.X，并不是版本越高越好，而應(yīng)根據(jù)實際需求進(jìn)行選擇。

如果搭建的是電腦端Web網(wǎng)站，建議使用jQuery1.9～jQuery1.11版本，因為這些版本支持IE8——在當(dāng)下電腦端兼容IE8還是有必要的。同時，這些版本的API與更高版本的基本一致，且針對低版本的不足之處進(jìn)行了修復(fù)。目前很多知名網(wǎng)站選用的jQuery版本也集中在jQuery1.9～jQuery1.11，如百度、CSDN、騰訊課堂、慕課網(wǎng)等。

如果搭建的是移動端Web網(wǎng)站，則需要選擇jQuery3.X版本，只有在jQuery3.X版本中才加入了移動端的一些功能，低版本對移動端的支持不夠優(yōu)秀。

另外，不推薦的版本有jQuery1.7以下的版本及jQuery2.X版本。jQuery1.7以下的版本與之后jQuery版本的API相差比較大，且性能不高；而jQuery2.X版本存在的周期較短，完全能被jQuery3.X版本替代。

1.?獲取運(yùn)行庫

根據(jù)相關(guān)知識中“jQuery庫文件下載”的描述，下載jQuery1.12.4運(yùn)行庫，并將其保存為“jquery-1.12.4.js”，或者在頁面中引用百度提供的jQuery1.11.3運(yùn)行庫CDN：

<scriptsrc="/jquery/1.11.3/jquery.min.js"></script>

2.?創(chuàng)建項目

在開發(fā)工具中創(chuàng)建一個新的項目，命名為“jQueryProject”，后面的內(nèi)容中將其簡稱為項目。

3.?將jQuery運(yùn)行庫引入項目

在項目下創(chuàng)建一個文件夾，命名為“js”，將之前準(zhǔn)備好的jquery-1.12.4.js文件放入js文件夾中，目錄結(jié)構(gòu)如圖1-9所示。圖1-9引用jQuery庫文件

4.?在頁面中引入jQuery

在項目中創(chuàng)建一個頁面，在頁面代碼的<head>元素中引入js文件后，就能使用jQuery了，代碼如下：

5.?編寫我的第一個jQuery程序

引入jQuery運(yùn)行庫后，可在下方編寫jQuery代碼，代碼如下：

如果jQuery運(yùn)行庫文件路徑正確，則顯示如圖1-10所示頁面。圖1-10jQuery加載成功頁面

如果jQuery運(yùn)行庫文件路徑錯誤，則顯示如圖1-11所示頁面，瀏覽器會報出以下錯誤信息：“$isnotdefined”($沒有被定義)。圖1-11jQuery加載失敗頁面

6.?jQuery代碼說明

上面的代碼，在頁面中放入一個h1元素，在頁面中顯示“jQuery加載失?。　?。可在JavaScript代碼中使用if語句判斷jQuery元素是否存在。如果jQuery元素存在，則證明jQuery運(yùn)行庫加載成功，使用jQuery獲取頁面中的h1元素，將元素內(nèi)容修改為“jQuery加載成功！”；如果jQuery元素不存在，則JavaScript會報錯，不會執(zhí)行下面的代碼，頁面上顯示“jQuery加載失敗！”。

1)?$(document).ready()

在jQue