Jquery學(xué)習(xí)文檔

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

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

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

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

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

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

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

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

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

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

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

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

13、vaScript 庫(kù)共存，在項(xiàng)目中放心的引用而不需要考慮到后期可能的 沖突。(7) 出色的瀏覽器兼容性。作為一個(gè)流行的 JavaScript 庫(kù)，瀏覽器的兼容性是必須具備的條件之一。jQuery 能夠在 IE6.0+ FF2+ Safari2.0和 Opera9.O+下正常運(yùn)行。jQuery 同時(shí)修 復(fù)了一些瀏覽器之間的差異，是開(kāi)發(fā)者不必在開(kāi)展項(xiàng)目前建立瀏覽器兼容性。(8) 鏈?zhǔn)讲僮鞣绞?。jQuery 中最有特色的莫過(guò)與它的鏈?zhǔn)讲僮鞣绞郊磳?duì)發(fā)生在同一個(gè) jQuery 對(duì)象上的一組動(dòng)作，可以直接連接寫(xiě)而無(wú)需重復(fù)獲取對(duì)象。這一特點(diǎn)使 jQuery 的代碼無(wú)比優(yōu)雅。(9 )隱式迭代當(dāng)用 jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36、例子，代碼如下：jQuery 獲取網(wǎng)頁(yè)中不存在的元素也不會(huì)報(bào)或者轉(zhuǎn)換成 DOM 對(duì)象來(lái)判斷，代碼如下:If($(“ tt ”)0)/do someth ing2.3 jQuery 選擇器jQuery 選擇器分為基本選擇器，層次選擇器，過(guò)濾器選擇器和表單選擇器。 在下面的章節(jié)中將分別用不同的選擇器來(lái)查找HTML 代碼中的元素并對(duì)其進(jìn)行簡(jiǎn)單的操作。為了能更清晰，直觀的講解選擇器，首先需要設(shè)計(jì)一個(gè)簡(jiǎn)單的頁(yè)面， 里面包含各種元素和元素，然后使用 jQuery 選擇器來(lái)匹配元素并調(diào) 整他們的樣式。新建一個(gè)空白頁(yè)面，輸入以下 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)北正在侃有動(dòng)國(guó)的 span 元當(dāng)+切呂 pan然后用 CSS 寸這些元素進(jìn)行初始化大小和背景顏色的設(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 所示的頁(yè)面效果圖 2-1 初始狀態(tài)2.3.1 基本選擇器基本選擇器是 jQuery 中最常用的選擇器， 也是最簡(jiǎn)單的選擇器， 它通過(guò)元 素 id、 class和標(biāo)簽名等來(lái)查找 DOM 元素。 在網(wǎng)頁(yè)中， 每個(gè) id 名稱(chēng)只能使用一次, class 允許重復(fù)使用?；具x擇器的介紹說(shuō)明如表2-1 所示。表 2-1 基本選擇器選擇器描述返回示例#id根據(jù)給定的 id 匹配一個(gè)元素單個(gè)元素$（ #tes 選取

40、）為 test 的兀素.class根據(jù)給定的類(lèi)名匹配元素集合元素$（ “ .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將每一個(gè)選擇器$( “ div,span,p.myClass 選取所有sele

41、ctor2,. ,匹配到的兀素合集合兀素,和擁有 class 為 myClassselectorN并后一起返回的p標(biāo)簽的一組兀素可以使用這些基本選擇器來(lái)完成絕大多數(shù)的工作。下面用它們來(lái)匹配剛才HTML 代碼中的div，span等元素并進(jìn)行操作(改變背景色)，示例如表 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如果想通過(guò) DOM 元素之間的層次關(guān)系來(lái)獲取特定元素，例如后代元素、子 元素、相鄰元素和兄弟元素等，那么層次選擇器是一個(gè)非常好的選擇。層次選擇 器的介紹說(shuō)明如表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 的下一個(gè) 兀素$( “ prevsiblings選取 prev 元素之后的所有”)siblings 兀素集合元素$( “ #twodiv 選擇 id 為two 的元素后面的所有div 兄弟兀素繼續(xù)沿用剛才例子中的 HTML 和 CSS 弋碼，然后用層次選擇器來(lái)對(duì)網(wǎng)頁(yè)中的div，spa

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

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

46、 “ bodydiv ” ) .css(” ,” #bbffaa ” );$(。.one+div ” ) .css(” #bbffaa ” );$( “ #twodiv ” ) .css(” ,” #bbffaa ” );id時(shí)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ò)濾選擇器過(guò)濾選擇器主要是通過(guò)特定的過(guò)濾規(guī)則來(lái)

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

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

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

51、后改變第 1 個(gè)div元素的背景色$( “ div:firstIdart&ftldlrdlE吶nnrM0t#帳寸 lbdBH3Fflli.bithiidtWDiClaSS?Jone .titled#bbffaa ” );TWlHIMAmraImndass.Trnrtitk邑含術(shù)IM朮的typEESWrWi hidden&div spcinTi：.改變最后一個(gè)div元素的背景色$( “ div:last ” J.CsaCkground”，” #bbffaa ” );id為n的di”neUItl電沖knit的biv.mnTW1|Ig 胡hin正在執(zhí)抒動(dòng)畫(huà)的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正在機(jī)廳子酉孑Srpnn元兼迂在電汙津可冇spatniTL-,改變所有的標(biāo)題元素，例如：,. 這些元素的背景色$( “: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行動(dòng)亙的沖日門(mén)元栄一r3fct肖mnph 理旬Ifibnirm匕燈啊色貴戡常tirv.da55 EriPfH*壬在晰動(dòng)祠19NL. twockssETl|&2少|(zhì)紡昭曲iivEboamn.titleEaiJi-frs/iarspan元聿-“backg基本過(guò)濾選擇器改變當(dāng)前正在執(zhí)行動(dòng)畫(huà)的元素的背景Eni.Ftlc功能代碼執(zhí)行后改變含有文本“ di”的div元素的背景$( div:contains(

56、di) ).css( kground ” , ”#bbffaa ” );改變不包含子元素(文本元素)的div空元素的背景色$( div:empty ) .css( und ” , ”#bbffaa ” );backgHz鋪mrutunI2.內(nèi)容過(guò)濾選擇器內(nèi)容過(guò)濾選擇器的過(guò)濾規(guī)則主要體現(xiàn)在它所包含的子元素或文本內(nèi)容上。內(nèi)容過(guò)濾選擇器的介紹說(shuō)明如表 2-7 所示表 2-7 內(nèi)容過(guò)濾選擇器選擇器描述返回示例: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兀素接下來(lái)使用內(nèi)容過(guò)濾選擇器來(lái)操作頁(yè)面中的元素，示例如表2-8 所示表 2-8 內(nèi)容過(guò)濾器示例arksEf包含incut的鈕片|嚴(yán)翻誦祠 屮r Id Hen1的di、sponJMt.acidlDnelass/旺啟I*sp自n元益3.可見(jiàn)性過(guò)濾器可見(jiàn)性過(guò)濾選擇器是根據(jù)元

58、素的可見(jiàn)和不可見(jiàn)狀態(tài)來(lá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可見(jiàn)視自intxi【旳仟戶(hù)hlddenTdlv3 呦nwiiid.twoclass?n*. titledtesttTimimi甩古Inpul珀

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

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