Jquery學習文檔

1、JQuery文檔一、認識jQuery隨著 Web 2.0 的興起，JavaScript 越來越受到重視，一系列的 JavaScript 庫也 蓬勃發(fā)展起來。從早期的 Prototype、Dojo 到 2006 年的 jQuery，再到 2007 年的 Ext JS互聯(lián)網(wǎng)正在掀起一場 JavaScrip 風暴。jQuery 以其獨特優(yōu)雅的姿態(tài)，始終 處于這場風暴的中心，受到越來越多的人的追捧。1.1JavaScript 和 JavaScript 庫1.1.1JavaScript 簡介在正式介紹 jQuery 之前，有必要先了解一下 JavaScriptJavaScript 是 Netscape

2、公司開發(fā)的一種腳本語言(scripting Ianguage)。JavaScript 的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時的、動態(tài)的和交互的關(guān)系，使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容。JavaScript 自身存在 3 個弊端，即復雜的文檔對象模型(DOM )，不一致的瀏覽器實現(xiàn)和缺乏便捷的開發(fā)、調(diào)試 工具。正當 JavaScript 從開發(fā)者的視線中漸漸隱去時，一種新型的基于JavaScript的 Web 技術(shù)-Ajax (Asynchronous JavaScript And XML,異步的 JavaScript 和 XML ) 誕生了。而使人們真正認識到 Ajax 技術(shù)的強大的導火

3、索是 Google 公司推出的一 系列新型 Web 應(yīng)用，例如 Gmail、 Google Suggest 和 Google Map 等?；ヂ?lián)網(wǎng)基 于 JavaScript的應(yīng)用也越來越多，使 JavaScript 不再是一種僅僅用于制作 Web 頁 面的簡單腳本。1.1.2JavaScript 庫作用及對比為了簡化 JavaScript 的開發(fā)， 一些 JavaScript 庫誕生了。 JavaScript 庫圭寸裝了 很多預定義的對象和實用函數(shù)，能幫助使用者輕松建立有高難度交互的Web 2.0特性的富客戶端頁面，并且兼容各大瀏覽器。下面是目前幾種流行的JavaScript庫的介紹和對比Pr

4、ototype : Prototype 是最早成型的 JavaScript 庫之一，對 JavaScript 的內(nèi)置 對象 （例如 String 對象、 Array 對象等） 做了大量的擴展。 現(xiàn)在還有很多項目使 用 Prototype。Prototype 可以看做是把很多好的、有用的 JavaScript 的方法組合在 一起而形成的JavaScript 庫。使用者可以在需要的時候隨時將其中的幾段代碼抽 出來放進自己的腳本里。但是由于Prototype 成型年代早，從整體上對于面向?qū)ο蟮木幊趟枷氚盐詹皇呛艿轿?，導致了其結(jié)構(gòu)的松散。不過現(xiàn)在Prototype 也在慢慢改進。Dojo : Dojo

5、 的強大之處在于 Dojo 提供了很多其他 JavaScript 庫所沒有提供 的功能。例如離線存儲的 API、生成圖標的組件、基于 SVG/VML 的矢量圖形庫 和 Comet支持等等。Dojo 是一款非常適合企業(yè)級應(yīng)用的 JavaScript 庫，并且得到 了 IBM、SUN和 BEA 等一些大公司的支持。但是 Dojo 的缺點也是很明顯的： 學習曲線陡，文檔不齊全，最嚴重的就是 API 不穩(wěn)定，每次升級都可能導致已有 的程序失效。但是自從 Dojo的 1.0.0 版出現(xiàn)以后，情況有所好轉(zhuǎn)。Dojo 還是一 個很有發(fā)揮潛力的庫。YUI : YUI 是由 Yahoo 公司開發(fā)的一套完備的、擴

6、展項良好的富交互網(wǎng)頁程 序工具集。YUI 封裝了一系列比較豐富的功能，例如DOM 操作和 Ajax 應(yīng)用等，同時還包括了幾個核心的 CSS 文件。該庫本身文檔極其完備，代碼編寫也非常 規(guī)范。Ext JS : Ext JS 常簡稱為 Ext，原本是對 YUI 的一個擴展，主要用于創(chuàng)建前 端用戶界面，如今已經(jīng)發(fā)展到可以利用包括 jQuery 在內(nèi)的各種 JavaScript 框架作 為基礎(chǔ)庫，而 Ext 作為界面的擴展庫來使用。Ext 可以用來開發(fā)富有華麗外觀的 富客戶端應(yīng)用，能使 B/S 應(yīng)用更加具有活力。但是由于 Ext 側(cè)重于界面，本身比 較臃腫，所以使用之前請先權(quán)衡利弊。另外，需要注意的事

7、，Ext 并非完全免費， 如果用于商業(yè)用途，需要付費獲得授權(quán)許可。MooTools : MooTools 是一套輕量、簡潔、模塊化和面向?qū)ο蟮腏avaScript框架。MooTools 的語法幾乎和 Prototype 一樣，但卻提供了更為強大的功能、更 好的擴展性和兼容性。其模塊化思想非常優(yōu)秀，核心代碼大小只有8KB。無論用到哪個模塊都可及時導入，即使是完整版大小也不超過160KB。MooTools 完 全徹底的面向?qū)ο蟮木幊趟枷?，語法簡潔直觀，文檔完善，是一個非常不錯的 JavaScript庫。jQuery : jQuery 同樣是一個輕量級的庫，擁有強大的選擇器，出色的 DOM 操作，可

8、靠的事件處理、完善的兼容性和鏈式操作等功能。 這些優(yōu)點吸引了一批 批的JavaScript 開發(fā)者去學習它、研究它。總之，每個 JavaScript 庫都有各自的優(yōu)點和缺點，同時也有各自的支持者和 反對者。自從 jQuery 誕生那天起，其關(guān)注度就一直在穩(wěn)步上升，jQuery 已經(jīng)逐 漸從其他JavaScript 庫中脫穎而出，成為 Web 開發(fā)人員的最佳選擇。1.2 jQuery1.2.1jQuery 簡介jQuery 是繼 Prototype 之后有一個優(yōu)秀的 JavaScript 庫，是一個由 John Resig 創(chuàng)建于 2006 年 1 月的開源項目?，F(xiàn)在的 jQuery 團隊主要包

9、括核心庫、UI 和插件 等開發(fā)人員以及推廣和網(wǎng)站設(shè)計維護人員。 團隊中由 3 個核心人物： John Resig Brandon Aaron和 Jorn Zaeffere。jQuery 憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript 開發(fā)人員遍歷 HTML 文檔、操作 DOM、處理事件、執(zhí)行動畫和開發(fā) Ajax 的操作。其獨 特而又優(yōu)雅的代碼風格改變了 JavaScript 程序員的設(shè)計思路和編寫程序的方式。 總之，無論是網(wǎng)頁設(shè)計師、后臺開發(fā)者、業(yè)余愛好者是項目管理者，也無論是 JavaScript 初學者還是 JavaScript 高手，都又足夠都的理由去學習 jQuery

10、。1.2.2jQuery 的優(yōu)勢jQuery 強調(diào)的理念是寫的少，做得多(write less，do more)。jQuery 獨特的選 擇器、鏈式的 DOM 操作、事件處理機制和圭寸裝完善的 Ajax 都是其他 JavaScript 庫望塵莫及的。概括起來，jQuery 有以下優(yōu)勢。(1)輕量級。jQuery 非常輕巧，采用 Dean Edwards 編寫的 Parker 壓縮后，大小不到 30KB。如果使用 Min 版并且在服務(wù)器啟用 Gzip 壓縮后，大小只有 18KB強大的選擇器。jQuery 允許開發(fā)者使用從 CSS 倒 CSS3 幾乎所有的選擇器，以及 jQuery 獨 創(chuàng)的高級而

11、復雜的選擇器。另外還可以加入插件使其支持XPath 選擇器，甚至開發(fā)者可以編寫屬于自己的選擇器。由于jQuery 支持選擇器這一特性，因此有一定 CSS 經(jīng)驗的開發(fā)人員可以很容易地切入到j(luò)Query 的學習中來。(3) 出色的 DOM 操作的封裝。jQuery 封裝了大量常用的 DOM 操作，使開發(fā)者在編寫 DOM 操作相關(guān)程序 的時候能夠得心應(yīng)手。 JQuery 輕松地完成各種原本非常復雜的操作， 讓 JavaScript 新手也能寫出出色的程序。(4) 可靠的事件處理機制吸取了 JavaScript 專家 Dean Edwards 編寫的事件處理函數(shù)的精華，使得 jQuery在處理事件綁定

12、的時候相當可靠。在預留退路(graceful degradation)、循序漸進以及非入侵式(Unobtrusive)編程思想方法，jQuery 也做的非常不錯。(5) 完善的 AjaxjQuery 將所有的 Ajax 操作封裝到一個函數(shù)$.ajax()里，使得開發(fā)者處理 Ajax 的時候能夠?qū)Ｐ奶幚順I(yè)務(wù)邏輯而無需關(guān)心復雜的瀏覽器兼容性和 XMLHttpRequest 對象的創(chuàng)建和使用的問題。(6) 不污染頂級變量。jQuery 只建立一個名為 jQuery 的對象，其所有的函數(shù)方法都在這個對象之 下。其別名$也可以隨時交出控制權(quán)，絕對不會污染其他的對象。該特性使 jQuery 可以與其他Ja

13、vaScript 庫共存，在項目中放心的引用而不需要考慮到后期可能的 沖突。(7) 出色的瀏覽器兼容性。作為一個流行的 JavaScript 庫，瀏覽器的兼容性是必須具備的條件之一。jQuery 能夠在 IE6.0+ FF2+ Safari2.0和 Opera9.O+下正常運行。jQuery 同時修 復了一些瀏覽器之間的差異，是開發(fā)者不必在開展項目前建立瀏覽器兼容性。(8) 鏈式操作方式。jQuery 中最有特色的莫過與它的鏈式操作方式即對發(fā)生在同一個 jQuery 對象上的一組動作，可以直接連接寫而無需重復獲取對象。這一特點使 jQuery 的代碼無比優(yōu)雅。(9 )隱式迭代當用 jQuery

14、 找到帶有“ .myClass 類的全部元素，然后隱藏它們時，無需循 環(huán)遍歷每一個返回的元素。相反，jQuery 里的方法都被設(shè)計成自動操作對象的對 象集合，而不是單獨的對象，這使得大量的循環(huán)結(jié)構(gòu)變得不再必要，從而大幅地減少了代碼量。(10) 行為層與結(jié)構(gòu)層的分離。開發(fā)者可以使用 jQuery 選擇器選中元素，然后直接給元素添加事件。這種 將行為層與結(jié)構(gòu)層完全分離的思想，可以使 jQuery 開發(fā)人員和 HTML 或其他頁面 開發(fā)人員各司其職，擺脫過去開發(fā)沖突或個人單干的開發(fā)模式。同時，后期維護 也非常方便，不需要在 HTML 代碼中尋找某些函數(shù)和重復修改 HTML 代碼。(11) 豐富的插件

15、支持。jQuery 的易擴展性，吸引了來自全球的開發(fā)者來編寫jQuery 的擴展插件。目前已經(jīng)有超過幾百種的官方插件支持，而且還不斷有新插件面世。(12)完善文檔。jQuery的文檔非常豐富， 現(xiàn)階段多為英文文檔， 中文文檔相對較少。 很多熱 愛jQuery團隊都在努力完善 jQuery 的中文文檔，例如 jQuery 的中文 API，圖靈 教育的翻譯的Learning jQuery等等。(13)開源。jQuery 是一個開源的產(chǎn)品，任何人都可以自由地使用并提出改進意見。1.3 jQuery 代碼的編寫JQuery 不需要安裝，把下載的 jquery-1.4.1.js 放到網(wǎng)站上的一個公共的位

16、置， 想要在某各頁面上使用 jQuery 時，只需要在相關(guān)的 HTML 文檔中引入該庫文件即 可。在實際項目中，讀者可以根據(jù)實際需要調(diào)整 jQuery 庫路徑。1.3.1第一個 jQuery 程序(Hello World!)在開始編寫第一個 jQuery 程序之前，首先應(yīng)該明確一點，在 jQuery 庫中，$就 是jQuery 的一個簡寫形式，例如$( “#foo 和)Query( “#foc 是等價的，如果沒有 特殊說明，程序中的$符號都是 jQuery 的一個簡寫形式。第一個 jQuery 程序的主要代碼如下：/script?srnpt lypt-s t eat/jsvas 亡 Yipt$

17、 tdocument). readj (furict ion (J /7 等待 dojk7T；毒加載克畢slert (Hello rldD；彈出対話框)；運行結(jié)果如圖 1-1 所示。廣來目寓頁的消息| Hello Wo rid 1圖 1-1 輸出 Hello World在上面的代碼中有一個陌生的代碼片段，如下：$(docume nt).ready(fu nctio n()/ .)；這段代碼的作用類似于傳統(tǒng)JavaScript 中的 window.onload 方法，不過與window.onload 還是有些區(qū)別。表格 1-1 對它們進行了簡單對比。表 1-1 window.onload 與$(

18、document).ready()的對比Win dow. onl oad$(docume nt).ready();執(zhí)行時機必須等待網(wǎng)頁中所有內(nèi)容加載完畢后(包含圖片)才能執(zhí)行網(wǎng)頁中所有 DOM 結(jié)構(gòu)繪制完畢后就執(zhí)行，可能 DOM 元素關(guān)聯(lián)的東西并沒有加載完編寫個數(shù)不能同時編寫多個以下代碼無法正確執(zhí)行：wi ndow.o nl oad=fu nctio n()能同時編寫多個以下代碼正確執(zhí)行$(docume nt).ready(fu ncti on()alert(test1);wi ndow.o nl oad=fu nction() alert(test2);結(jié)果只會輸出“ test2 ”aler

19、t(Hello World!););$(docume nt).ready(fu nction() alert(Hello aga in!););結(jié)果兩次都輸出$(docume nt).ready(fu ncti on()簡化寫法無)簡寫成：$( fun ctio n()1.4 jQuery 對象和 DOM 對象1.4.1DOM 對象和 jQuery 對象簡介剛開始學習 jQuery，經(jīng)常分辨不清哪些是 jQuery 對象，哪些是 DOM 對象, 因此需要重點了解 jQuery 對象和 DOM 對象以及它們之間的關(guān)系。1. DOM 對象DOM（Document Object Model，文檔對象

20、模型），每一份 DOM 都可以表示成 一棵樹。下面來構(gòu)建一個基本的網(wǎng)頁，網(wǎng)頁代碼如下： g!l 子p title=*選擇你最盲飲的水果的水果昱GLi蘋果CLD橘子蘿/1 小初始化效果如圖 1-2 所示?？梢园焉厦娴?HTML 結(jié)構(gòu)描述成一棵 DOM 樹，如圖 1-3 所示。在這棵 DOM 樹中， h3、 p、 ul以及ul的 3 個li子節(jié)點都是 DOM元 素節(jié)點?？梢酝ㄟ^ JavaScript 中的 getElementByTagName 或者 getElementByld來 獲取元素節(jié)點。像這樣得到的 DOM 元素就是 DOM 對象。DOM 對象可以使用JavaScript 中的方法，示例

21、代碼如下：var domObj = document.getElementsByld(id); / Dom 對象var ObjHTML = domObj.innerHTML; / 使用 JavaScript 中的 innerHTML 方法2. jQuery 對象jQuery 對象就是通過 jQuery 包裝 DOM 對象后產(chǎn)生的對象。jQuery 對象是 jQuery獨有的。如果一個對象是 jQuery 對象，那么就可以使用 jQuery 里的方法。 例如：$(#foo).html();獲取 id 為 foo 的元素內(nèi)的 html 代碼。這段代碼等同于：docume nt.getEleme n

22、tById(foo).i nn erHTML;在 jQuery 對象中無法使用 DOM 對象的任何方法。例如$(#id).innerHTML 和$(#id).checked 之類的寫法都是錯誤的， 可以用$(#id).html()和 $(#id).attr(checked)之類的 jQuery 方法代替。同樣，DOM 對象也不能使用 jQuery 里的方法，例如document.getElementByld(id).html()也會報錯，只能用document.getElementById(id).innerHTML 語句。1.4.2jQuery 對象和 DOM 對象的相互轉(zhuǎn)換在討論 jQue

23、ry 對象和 DOM 對象的相互轉(zhuǎn)換之前，先約定好定義變量的風格 如果例子你最喜歡的水果是乍蘋橘菠圖 1-2 基本網(wǎng)頁運行結(jié)果圖 1-3 網(wǎng)頁元素可看成一棵樹獲取的對象是 jQuery 對象，那么在變量前面加上$，例如：var $variable = jQuery 對象；如果獲取的是 DOM 對象，則定義如下：var varible = DOM 對象；1. jQuery 對象轉(zhuǎn)成 DOM 對象jQuery 對象不能使用 DOM 中的方法， 但如果對 jQuery 對象所提供的方法不 熟悉，或者 jQuery 沒有封裝想要的方法，不得不適用 DOM 對象的時候，有以下 處理方法。jQuery 提

24、供了兩種方法將一個 jQuery 對象愛那個轉(zhuǎn)換成 DOM 對象，即index 和get(index).jQuery 對象是一個數(shù)組對象，可以通過index的方法得到相應(yīng)的 DOM 對 象。jQuery 代碼如下：var $cr = $(#cr); /jQuery 對象；var cr = $cr0; /DOM 對象；alert(cr.checked);(2) 另一種方法是 jQuery 本身提供的， 通過 get(index)方法得到相應(yīng)的 DOM 對象。jQuery 代碼如下：var $cr=$(#cr); /jQuery 對象var cr = $cr.get(0); /DOM 對象aler

25、t(cr.checked); / 檢測這個 checkbox 是否被選中了2. DOM 對象轉(zhuǎn)換成 jQuery 對象對于一個 DOM 對象，只需要用$()把 DOM 對象包裝起來，就可以獲得一個 jQuery對象了。方式為 $(DOM 對象)。jQuery 代碼如下：var cr= document.getElementByld(cr);/DOM 對象var $cr = $(cr);/jQuery 對象轉(zhuǎn)換后，可以任意使用 jQuery 中的方法。通過以上方法，可以任意地相互轉(zhuǎn)換 jQuery 對象和 DOM 對象。最后再次強調(diào)，DOM 對象才能使用 DOM 中的方法，jQuery 對象不可

26、以使用DOM 中的方法，但 jQuery 對象提供了一套更加完善的工具用于操作DOM,關(guān)于jQuery 的 DOM 操作將在后面進行詳細講解。注意：平時用到的 jQuery 對象都是通過$()函數(shù)制造出來的，$()函數(shù)就是一 個jQuery 對象的制造工廠。143 實例研究下面舉個簡單的例子，來加深對 jQuery 對象和 DOM 對象的理解。有些論壇在用戶注冊的時候，必須先要同意論壇的規(guī)章制度，才可以進行下 一步操作。編寫一段簡單的代碼來實現(xiàn)這個功能。新建一個空白頁面，然后添加以下HTML 代碼：我已經(jīng)閱讀了上面的制度。v/labelHTML 代碼初始效果如圖 1-4 所示。I 1我已經(jīng)閱讀

27、了上面制度.圖 1-4 初始效果然后編寫 JavaScrip 部分。前面講過，沒有特殊聲明，jQuery 庫是默認導入 的。通過$(#cr)獲取到復選框元素，然后通過判斷復選框是否被選中，來執(zhí)行 下一步操作。首先，用 DOM 方式來判斷復選框是否被選中，代碼如下：$(docume nt).ready(fu nctio n()var $cr = $(#cr); /jQuery 對象var cr = $cr.get(O); /DOM 對象，獲取 $cr0$cr.click(fu nctio n()if(cr.checked) /DOM 方式判斷alert(感謝你的支持！你可以繼續(xù)操作!););實現(xiàn)

28、上述代碼后，選中“我已經(jīng)閱讀了上面制度”復選框，如圖換一種方式，使用 jQuery 中的方法來判斷選項是否被選中，代碼如下：$(docume nt).ready(fu nctio n()var $cr = $(#cr); /jQuery 對象$cr.click(fu nctio n()if($cr.is(:checked)/jQuery 方式判斷alert(感謝你的支持！你可以繼續(xù)操作！););上面的例子簡單地演示了 DOM 對象和 jQuery 對象的不同，但最終效果一樣 的。jQuery選擇器選擇器是 jQuery 的根基，在 jQuery 中，對事件的處理、遍歷 DOM 和 Ajax 操

29、作都依賴于選擇器。如果能熟練地使用選擇器，不僅能簡化代碼， 而且可以達 到事半功倍的效果。1-5 所示?；匚壹航?jīng)閱讀了上面制度一圖 1-5 選中選項后的效果圖2.1 jQuery 選擇器是什么jQuery 中的選擇器完全繼承了 css 的風格。利用 jQuery 選擇器，可以非常便 捷和快速地找出特定的 DOM 元素，然后為他們添加相應(yīng)的行為，而無需擔心瀏 覽器是否支持這一選擇器。學會使用選擇器是學習jQuery 的基礎(chǔ)，jQuery 的行為規(guī)則都必須在獲取到元素后才能生效。下面來看一個簡單的例子，代碼如下：vscript type=” text/javascript”Fun cti on d

30、emo()Alert(“JavaScript demo.” );p onclick= ” demo 點擊我 本段代碼的作用是為元素設(shè)置一個 on click 事件，當單擊此元素時，會彈 出一個對話框。像上面這樣把 JavaScript 代碼和 html 代碼混雜在一起的做法同樣也非常不 妥，因為它并沒有將網(wǎng)頁內(nèi)容和行為分離，所以建議使用下面的方法，代碼如下：jQuery Demoscript type= ” text/javascript ”$( “ .demo” ).click(function()/ 給 class 為 demo 的元素添加行為Alert(“jQuery demo! ” )

31、;)此時，可以對 css 的寫法和 jQuery 的寫法進行比較。Css 獲取到元素的代碼如下：.demo/給 class 為 demo 的元素添加樣式j(luò)Query 獲取到元素的代碼如下:$( “.demo” jQuery 選擇器的寫法與 css 選擇器的寫法十分類似，只不過兩者的作用效果 不同，css 選擇器找到元素后是添加樣式，而 jQuery 選擇器找到元素后是添加行 為。需要特別說明的是，jQuery 中涉及操作 css 樣式部分比單純的 css 功能更為 強大，并且擁有跨瀏覽器的兼容性。2.2 jQuery 選擇器的優(yōu)勢1.簡潔的寫法$()函數(shù)在很多 JavaScript 類庫中都被

32、作為一個選擇器函數(shù)來使用，在 jQuery 中也不例外。其中，$( “#ID”)用來代替 document.getElementByld()函數(shù)，即通 過 ID 獲取元素；$(“tagName”)用來代替 document.getElementByTagName(函數(shù)， 即通過標簽名獲取 HTML 元素。2 .支持 css1 到 css3 選擇器jQuery 選擇器支持 css1, css2 的全部和 css3 的部分選擇器，同時他也有少量 獨有的選擇器，因此對擁有一定 css 基礎(chǔ)的開發(fā)人員來說，學習 jQuery 選擇器是 件非常容易的事，而對沒有接觸過 css 技術(shù)的開發(fā)人員來說，在學習

33、 jQuery 選擇 器的同時也可以掌握 css 選擇器的基本規(guī)則。使用 css 選擇器時，開發(fā)人員需要考慮是否支持某些選擇器。而在 jQuery 中， 開發(fā)人員則可以放心的使用 jQuery 選擇器而無需考慮瀏覽器是否支持這些選擇 器。3.完善的處理機制使用 jQuery 選擇器不僅比用傳統(tǒng)的 getElementById()和 getElementsByTagName 函數(shù)簡潔得多，而且還能避免某些錯誤?？聪旅孢@個例 子，代碼如下：testscript type= ” text/javascript ”document.getElementByld(“tt ” ).style.color=

34、 ” red ”；/給 class 為 demo 的元素添加行為運行上面的代碼，瀏覽器就會報錯，原因是網(wǎng)頁中沒有id 為“tt”的元素。改進后的代碼如下:testvscript type= ” text/javascript”if(docume nt.getEleme ntByld(testscript type= ” text/javascript ”$( “#tt ”).css(“color”red”)；/ 這里無需判斷 $( “#tt”)是否存在有了這個預防措施，即使以后因為某種原因刪除網(wǎng)頁上某個以前使用過的元 素，也不用擔心這個網(wǎng)頁的 JavaScript 代碼會報錯。需要注意的是，$

35、( “ #tt”)獲取的永遠是對象，即使網(wǎng)頁上沒有此元素。因 此當要用 jQuery 檢查某個元素在網(wǎng)頁上是否存在時，不能使用以下代碼：If($(“ #tt ”)/do someth ing而應(yīng)該根據(jù)獲取到元素的長度來判斷，代碼如下:if($(“tt ” ).length0)/do someth ingtt ”)docume nt.getElementByld(“tt ” ).style.color=I red這樣就可以避免瀏覽器報錯，但如果要操作的元素很多,可能對每個元素都要進行一次判斷，大量重復的工作會使開發(fā)人員感到厭倦，而jQuery 在這方面問題上的處理是非常不錯的，即使用錯，看下面的

36、例子，代碼如下：jQuery 獲取網(wǎng)頁中不存在的元素也不會報或者轉(zhuǎn)換成 DOM 對象來判斷，代碼如下:If($(“ tt ”)0)/do someth ing2.3 jQuery 選擇器jQuery 選擇器分為基本選擇器，層次選擇器，過濾器選擇器和表單選擇器。 在下面的章節(jié)中將分別用不同的選擇器來查找HTML 代碼中的元素并對其進行簡單的操作。為了能更清晰，直觀的講解選擇器，首先需要設(shè)計一個簡單的頁面， 里面包含各種元素和元素，然后使用 jQuery 選擇器來匹配元素并調(diào) 整他們的樣式。新建一個空白頁面，輸入以下 html 代碼：燈為廿 L 已亡九Mi色的白div/ dLiVid?ytT6j

37、classXloiiLej * it LeJJteEt div.class 対皿 ini, t it Le 対 other匚lass-niri* 1116=1621 cl ass mini jtitleltest7djvdiv zlass=rarte*7clas3ziLinz/di.v)-class為nin二dHcl3ss/tJnini/di寸cl ass % nin_ / di v)-cZ asstjjiin- /divi GL，0辭 g 為cla-3=，vjwir：ivitLcftc；fft,1cla5；/bnini,VdivFt71&51)(lLjplyncneB1div/div

38、?cl ass X hidedi v/ did包逸 input 的 typp 為Eidtkn的五口怎旳屮 tjp#-hiddsin si3e-,v8V* span id=m 網(wǎng)北正在侃有動國的 span 元當+切呂 pan然后用 CSS 寸這些元素進行初始化大小和背景顏色的設(shè)置，CSS 弋碼如下:div, span, p width.: 140pn: height:140px:marg：xn: Bpx;background;border：#000Ipir solid;float:left;font-size:17px;font-family: Verdana：div. nini width:5

39、5pK :height:55pn:backgroundcolor:ont-size:12pK:div, hide display:none;1根據(jù)以上 HTML+CSS 弋碼，可以生成圖 2-1 所示的頁面效果圖 2-1 初始狀態(tài)2.3.1 基本選擇器基本選擇器是 jQuery 中最常用的選擇器， 也是最簡單的選擇器， 它通過元 素 id、 class和標簽名等來查找 DOM 元素。 在網(wǎng)頁中， 每個 id 名稱只能使用一次, class 允許重復使用?；具x擇器的介紹說明如表2-1 所示。表 2-1 基本選擇器選擇器描述返回示例#id根據(jù)給定的 id 匹配一個元素單個元素$（ #tes 選取

40、）為 test 的兀素.class根據(jù)給定的類名匹配元素集合元素$（ “ .tes 選取所有 class 為 test 的元素id/oneclsssonefiOdivche二為idJtwOpdass口 “皂龍代恒為testJ div.c ass)min；clasc/jminidasSTnmi.tida為oilw包 S input fiJtype為hid 血 IT 的clmes為eleme nt根據(jù)給定的元素名匹配元素集合元素$( “ r 選取所有的p元素*匹配所有兀素集合兀素$( “ *選取所有的兀素selector將每一個選擇器$( “ div,span,p.myClass 選取所有sele

41、ctor2,. ,匹配到的兀素合集合兀素,和擁有 class 為 myClassselectorN并后一起返回的p標簽的一組兀素可以使用這些基本選擇器來完成絕大多數(shù)的工作。下面用它們來匹配剛才HTML 代碼中的div，span等元素并進行操作(改變背景色)，示例如表 2-2所示。表 2-2 基本選擇器示例功能代碼執(zhí)行后改變 id 為 one 的元素的背景色$( “ #one ” ).css( “ background ” , ”改變 class 為mini 的所有元素的背景色改變所有元素名是div的所有元素的背景改變所有元素的背景色$( “ .mini ”).css( “ background

42、 ” , ”$( “ div ” ).css( “ background ” , ” bb$( “ * ” ).css(“ background ” , ” bbffaLrNHd tttllpm,=占=.屮聲 mi如果想通過 DOM 元素之間的層次關(guān)系來獲取特定元素，例如后代元素、子 元素、相鄰元素和兄弟元素等，那么層次選擇器是一個非常好的選擇。層次選擇 器的介紹說明如表2-3 所示。表 2-3 層次選擇器選擇器描述返回示例$( “ ancestordescendant ”)選取 ancestor 兀素里的所有 descendant (后代兀素)集合元素$( “ divspan 選取 里的所有

43、的元素$( parentchild”選取 pare nt 兀素下的 child)(子)元素集合元素$( “ div span 選取 div元素下兀素名是 spa n的子丿元糸$( prev+ next ”)選取緊接在 prev 兀素后的next 兀素集合元素$( “ .one+div 選取)class 為one 的下一個 兀素$( “ prevsiblings選取 prev 元素之后的所有”)siblings 兀素集合元素$( “ #twodiv 選擇 id 為two 的元素后面的所有div 兄弟兀素繼續(xù)沿用剛才例子中的 HTML 和 CSS 弋碼，然后用層次選擇器來對網(wǎng)頁中的div，spa

44、門等元素進行操作，示例如表 2-4 所示。表 2-4 層次選擇器示例功能代碼執(zhí)行后改變body內(nèi)所有div的背景色$( “bodydiv ” ).css( “ background ”)；oneffidivdiv.HI -tnn卜iii訶珂 仙53IKin”#bbffaaminpirutitl百1忖二卅角lildden*茁d Iv在戎行動昌的在層次選擇器中，第 1 個和第 2 個選擇器比較常用，而后面兩個因為在 jQuery里可以用更加簡單的方法代替，所以使用的幾率相對少些。可以用 next()方法來代替$( “prev+next ”)擇器， $( “ .one+div就)等價于$(。 .on

45、e ”).next(?？梢杂?nextAII()方法來代替$(。prevsiblings選擇器，$(。#prevdiv ”)就等價于$( #prev ”).nextAll(?！癲iv ”)在此將 siblings()方法與$( “prevsiblings 選擇器進行比較。$( “#prevdiv 選擇器只能選擇” #prev 元素后面的同輩div元素。而 siblings()方法與前后位置無關(guān)，只要是同輩元素節(jié)點就都能匹配。div 元素，無論前后位置改變body內(nèi)子div元素的背景色改變 class 為 one 的下一個div元素背景色改變 id 為 two 的元素后面的所有div兄弟元素$(

46、 “ bodydiv ” ) .css(” ,” #bbffaa ” );$(。.one+div ” ) .css(” #bbffaa ” );$( “ #twodiv ” ) .css(” ,” #bbffaa ” );id時cH#background口I IIImfiininniw為nn :itlground怛,含input的typEhidden ffdiv包含iDQUtfifitype為hdderT的dl#(c燈叨尢pin*I IF I正在執(zhí)仔前前的為hiinp$(“#prevdiv ” ).css(“background ”,選取 b#pfe0v 之后的所有同輩 div元$(“#pre

47、v ”).nextAll(“div ” ).css(“background 上,” #bbffaa ” );/$(“#prev ” ).siblings(“div” ).css(“ backgrou 選取#prev#所有的同輩;/ni?.tiHedly.ertharbacHBAinoutffJtype AHhidden*ground ”IdtionEclassSg 的di”a 垃mnm nsid?twD,cias5drv.bacmnLlrt*-*WieridtwOjClassJbHl趴上在抽j亍引酉？=1 span元素一：i咖右*W1I2.3.3 過濾選擇器過濾選擇器主要是通過特定的過濾規(guī)則來

48、篩選出所需的DOM 元素，過濾規(guī)則與 CSS 勺偽類選擇器語法相同，即選擇器都以一個冒號(:)開頭。按照不同的過 濾規(guī)則，過濾選擇器可以分為基本過濾、內(nèi)容過濾、可見性過濾、屬性過濾、子 元素過濾和表單對象屬性過濾選擇器。1.基本過濾選擇器表 2-5 基本過濾選擇器選擇器描述返回示例:first選取第一個元素單個元素$(div:first ”)選取所有 div元素中第一個div元素:last選取取后一個兀素單個元素$(div:last ”)選取所有 div元素中最后一個div元素:n ot(selector)去除所有與給定選擇器匹配的元素集合元素$( input:not(.myClass) ”

49、)選取 class 不是 myClass 的 兀素:eve n選取索引是偶數(shù)的所有兀素，索引從 0 開始集合元素$( input:even ”)選取索引是偶數(shù)的input兀素:odd選取索引是奇數(shù)的所有兀素，索引從 0 開始集合元素$( input:odd ” )選取索引是奇數(shù)的input兀素:eq(i ndex)選取索引等于 index 的兀素(index 從 0 開始)單個元素$( input:eq”)選取索引等于 1 的input兀素:gt(i ndex)選取索引大于 index 的兀素(index 從 0 開始)集合元素$( input:gt(1) ”)選取索引大于 1 的input兀

50、素(注：大于 1，而不包括 1):lt(i ndex)選取索引小于 index 的兀素(index 從 0 開始)集合元素$( input:lt(1) ”)選取索引小于 1 的input兀素(注:小于 1，而不包括 1):header選取所有的標題元素，例如h1,h2,h3 等等集合元素$( :header ” )選取網(wǎng)頁中所 有的,:animated選取當前正在執(zhí)行動畫的所有元素集合元素$( “ div:animated ”)選取正在執(zhí)行動畫的div元素接下來，使用這些基本過濾選擇器來對網(wǎng)頁中的 div、span等元素進行操作，示例如表 2-6 所示表 2-6 基本過濾選擇器示例功能代碼執(zhí)行

51、后改變第 1 個div元素的背景色$( “ div:firstIdart&ftldlrdlE吶nnrM0t#帳寸 lbdBH3Fflli.bithiidtWDiClaSS?Jone .titled#bbffaa ” );TWlHIMAmraImndass.Trnrtitk邑含術(shù)IM朮的typEESWrWi hidden&div spcinTi：.改變最后一個div元素的背景色$( “ div:last ” J.CsaCkground”，” #bbffaa ” );id為n的di”neUItl電沖knit的biv.mnTW1|Ig 胡hin正在執(zhí)抒動畫的spanTT：改變 cla

52、ss 不為 one的div元素的背景$( “ div:not(.one)backgound ” ,”#bbffaa ” );改變索引值為偶數(shù)的div元素的背景$( “ div:even ” “CssCkground”，” #bbffaa ” );g 眄rani血切nriiidaiE.mH. fcili*村:sth&firnputtfjtypeId onecTas&W印dl#2$納 1吟為innmpi件曲nifi&lnputffltypeAhldden的dhId.-udnE .class/-orbe&ldivnwiiInput的typehidden&td

53、ivIdy.div.div.classmniJWIIsrr+wr|d対twn.dasa為mim【IM曬ftHI|nin正在機廳子酉孑Srpnn元兼迂在電汙津可冇spatniTL-,改變所有的標題元素，例如：,. 這些元素的背景色$( “:header ” ).css(#bbffaa ” );$(#mover).click(fu nctio n()$(this).a nimate(width:+=100, height: +=100 , slow);$(:a ni mated).css(backgro und, #bbffaa);)改變索引為奇數(shù)的元素的背景色改變索引等于 3 的元素的背景色$(

54、 “ div:odd ”).css( “ backg#bbffaa ” );$( “ div:eq(3) ” ).css(” #bbffaa ” );ba改變索引值大于 3 的 $( “ div:gt(3).css(元素的背景色” #bbffaa ”)改變索引值小于 3 的 $( “ div:lt(3).css(ba元素的背景色#bbffaa ” );ld.tiofiEPclossAorbejdlvrounpinilrtQJ也宜Input的type1bidder&idlv創(chuàng)賓的曲甘|旦削叩誕的typeh hidden*Mdlvdassmifw.bblp-如dhorrniniround包

55、念I(lǐng)nputltypehidHerfHivId/JonqclBSiE%BSSxFmvickground丙*hlddwi喩VId 7twocJass!dFv.minii口HSEXJmini亡在th行動亙的沖日門元栄一r3fct肖mnph 理旬Ifibnirm匕燈啊色貴戡常tirv.da55 EriPfH*壬在晰動祠19NL. twockssETl|&2少|(zhì)紡昭曲iivEboamn.titleEaiJi-frs/iarspan元聿-“backg基本過濾選擇器改變當前正在執(zhí)行動畫的元素的背景Eni.Ftlc功能代碼執(zhí)行后改變含有文本“ di”的div元素的背景$( div:contains(

56、di) ).css( kground ” , ”#bbffaa ” );改變不包含子元素(文本元素)的div空元素的背景色$( div:empty ) .css( und ” , ”#bbffaa ” );backgHz鋪mrutunI2.內(nèi)容過濾選擇器內(nèi)容過濾選擇器的過濾規(guī)則主要體現(xiàn)在它所包含的子元素或文本內(nèi)容上。內(nèi)容過濾選擇器的介紹說明如表 2-7 所示表 2-7 內(nèi)容過濾選擇器選擇器描述返回示例:con tai ns(text)選取含有文本內(nèi)容為text的元素集合元素$( “div:contains(我)”)選取含有文本我的div丿元糸:empty選取不包含子元素或者文本的空元素集合元素

57、$( “ div:empty ”)選取不包含子元素(文本元素)的div空兀素:has(selector)選取含有選擇器所匹配的兀素的兀素集合元素$( “ div:has(p) ”)選取含有p兀素的div兀素:pare nt選取含有子元素或者文本的元素集合元素$( “ div:parent ”)選取擁有子元素(包含文本元素)的div兀素接下來使用內(nèi)容過濾選擇器來操作頁面中的元素，示例如表2-8 所示表 2-8 內(nèi)容過濾器示例arksEf包含incut的鈕片|嚴翻誦祠 屮r Id Hen1的di、sponJMt.acidlDnelass/旺啟I*sp自n元益3.可見性過濾器可見性過濾選擇器是根據(jù)元

58、素的可見和不可見狀態(tài)來選擇相應(yīng)的元素。改變含有 class 為$( div:has(.mini) ).css( “ bamini 元素的div元素的背景色ground ” , ” #bbffaa ” );改變含本元素)的div元素的背景色$( div:parent ) .css(und ” , ” #bbffaa ” );back舊酋1 J茍Jnini口M島刁 Ftinifill；rte&stinclassrrtrr.CCirihLtTli超Mt可見視自intxi【旳仟戶hlddenTdlv3 呦nwiiid.twoclass?n*. titledtesttTimimi甩古Inpul珀

59、hrppbd力twciiCliBSSEni.Ftlc性過濾選擇器的介紹說明如表2-9 所示表 2-9 可見性過濾選擇器選擇器描述返回示例:hidde n選取所有不可見的元素集合元素$(:hidden 選取所有不可見的兀素。包括,style= ” display:none 和 style=visibility:hidden;等兀素。如果只想選取 兀素，可以使用 $( input:hidden):visible選取所有可見的元素集合元素$( div:visible)選取所有可見的div兀素在例子中使用這些選擇器來操作 DOM 元素，示例如表 2-10 所示表 2-10 可見性過濾選擇器示例在可見性

60、選擇器中，需要注意選擇器:hidden，它不僅包括樣式屬性display為 “none” 的元素，也包括文本隱藏域(input type= ” hidden)和visibility:hidden之類的元素4.屬性過濾選擇器屬性過濾選擇器的過濾規(guī)則是通過元素的屬性來獲取相應(yīng)的元素。屬性過濾選擇器的介紹說明如表 2-11 所示表 2-11 屬性過濾選擇器選擇器描述返回示例attribute選取擁有此屬性的兒糸集合元素$( “ divid ”)選取擁有屬性 id 的元素attribute=value選取屬性的值為value 的兀素集合元素$( “ divtitle=test ”)選取屬性 title 為 “ test” 的 div丿元糸attribute!=value選取屬性的值不等于 value 的兀素