雖然jQuery上手簡(jiǎn)單，相比于其他庫(kù)學(xué)習(xí)起來(lái)較為簡(jiǎn)單，但是要全面掌握，卻不輕松。因?yàn)樗婕暗骄W(wǎng)頁(yè)開(kāi)發(fā)的方方面面，提供的方法和內(nèi)部變化有上千種之多。初學(xué)者常常感到，入門(mén)很方便，提高很困難。本文的目標(biāo)是將jQuery選擇器做一個(gè)系統(tǒng)的梳理，試圖理清jQuery的設(shè)計(jì)思想，找出學(xué)習(xí)的脈絡(luò)，使讀者從入門(mén)到精通。
jQuery是什么
簡(jiǎn)單的說(shuō)，jQuery是一個(gè)JavaScript框架，它的宗旨是：寫(xiě)更少的代碼，做更多的事情。對(duì)于Web開(kāi)發(fā)人員而言，jQuery是一個(gè)功能強(qiáng)大的JavaScript庫(kù)，能更加快速開(kāi)發(fā)相關(guān)應(yīng)用，例如AJAX交互，JavaScript動(dòng)畫(huà)效果等。對(duì)于Web設(shè)計(jì)師而言，jQuery封裝了Javascript源碼細(xì)節(jié)，實(shí)現(xiàn)了與HTML標(biāo)簽的有效分離，便于設(shè)計(jì)師更加專(zhuān)注于Web頁(yè)面設(shè)計(jì)效果。基于此，網(wǎng)頁(yè)的用戶體驗(yàn)大大增強(qiáng)，包括網(wǎng)頁(yè)的交互性，視覺(jué)效果等等。
jQuery的核心設(shè)計(jì)思想是：選擇某個(gè)網(wǎng)頁(yè)元素，然后對(duì)其進(jìn)行某種操作。那么如何選擇、定位某個(gè)網(wǎng)頁(yè)元素呢?對(duì)于JavaScript開(kāi)發(fā)人員而言，通常的一種手段是document.getElementById()。而在jQuery語(yǔ)法中，使用的是美元符號(hào)“$”，等價(jià)的選擇表達(dá)式寫(xiě)法為：
var someElement = $("#myId");
jQuery之所以稱(chēng)之為“jQuery”，主要就是因?yàn)樗鼜?qiáng)大的選擇器，也就是Javascript Query的意思。下面，我們具體介紹jQuery選擇器相關(guān)的設(shè)計(jì)思想：
一、jQuery基本選擇器
前面提到，選擇器是jQuery的特色。jQuery的基本選擇器主要分為tb以下五種類(lèi)型：
1. $(“#myId”) // 選擇ID為myId的網(wǎng)頁(yè)元素
2. $(“標(biāo)簽名”) // 例如$(“div”)獲取的就是HTML文檔中的所有的div元素的jQuery對(duì)象集合
3. $(“.myClass”) // 獲取的是HTML文檔中所有的class為“myClass”的元素集合
4. $(“*”) // 這個(gè)獲取的是HTML文檔中的所有的元素
5. $(“selector1,selector2,selector3…selectorN “) // 這種選擇器叫做組選擇器。例如：$(“span,#two”)
// 選取所有的span標(biāo)簽元素和id=two的元素。
二、jQuery層次選擇器
無(wú)論何時(shí)，通過(guò)jQuery選擇器獲取的jQuery對(duì)象任何時(shí)候都是一組元素。jQuery的層次選擇器主要分為以下兩種類(lèi)型：
1. $(“ancestor descendant”)：選取parent元素后所有的child元素。ancestor的中文意思是“祖先”，descendant的中文意思是“后代”。例如：
$(“body div”) 選取body元素下所有的div元素。
$(“div#test div”) 選取id為“test”的div所包含的所有的div子元素
2. $(“parent > child”)：選取parent元素后所有的第一個(gè)child元素。例如：
$(“body > div”) 選取body元素下所有的第一級(jí)div元素。
$(“div#test > div”) 選取id為“test”的div所包含的所有的第一級(jí)div子元素
三、jQuery過(guò)濾選擇器
jQuery最基本過(guò)濾選擇器包括：
1. :first // 選取第一個(gè)元素。$(“div:first”)選取所有div元素中的第一個(gè)div元素
2. :last // 選取最后一個(gè)元素。$(“div:last”)選取所有div元素中的最后一個(gè)div元素
3. :even // 選取索引是偶數(shù)的所有元素。$(“input:even”)選取索引是偶數(shù)的input元素。
4. :odd // 選取索引是奇數(shù)的所有元素。$(“input:odd”)選取索引是奇數(shù)的input元素。
5. :eq(index) // 選取索引等于index的元素。$(“input:eq(1)”)選取索引等于1的input元素。
6. :gt(index) // 選取索引大于index的元素。$(“input:gt(1)”)選取索引大于1的input元素。
7. :lt(index) // 選取索引小于index的元素。$(“input:lt(3)”)選取索引小于3的input元素。
jQuery內(nèi)容過(guò)濾選擇器，可以輕松地對(duì)DOM文檔中的文本內(nèi)容進(jìn)行篩選，從而準(zhǔn)確地選取我們所需要的元素。
1. :contains(text) // 選取含有文本內(nèi)容為“text”元素。$(“div:contains(‘你’)”)選取含有文本“你”的div元素。
2. :empty // 選取不包含子元素和文本的空元素。$(“div:empty”)選取不包含子元素(包括文本元素)的div空元素。
3. :parent // 選取含有子元素或者文本的元素。$(“div:parent”)選取擁有子元素(包括文本元素)的div元素。
可以看見(jiàn)，jQuery內(nèi)容過(guò)濾選擇器的過(guò)濾規(guī)則主要體現(xiàn)在它所包含的子元素或文本內(nèi)容上。
jQuery可見(jiàn)性過(guò)濾選擇器的用法如下：
1. :hidden // 選取所有不可見(jiàn)的元素。$(“:hidden”)選取網(wǎng)頁(yè)中所有不可見(jiàn)的元素。
2. :visible // 選取所有可見(jiàn)元素。$(“div:visible”)選取所有可見(jiàn)的div元素。
jQuery屬性過(guò)濾選擇器的過(guò)濾規(guī)則是通過(guò)元素的屬性來(lái)獲取相應(yīng)的元素。
1. [attribute] // 選擇擁有此屬性的元素。$(“div[id]“)選取擁有屬性id的元素。
2. [attribute=value] // 選取屬性值為value的元素。$(“div[name=test]“)選取屬性name的值為“test”的div元素。
3. [attribute!value] // 選取屬性值不等于value的元素。
4.[attribute^=value] // 選取屬性的值以value開(kāi)始的元素。
5. [attribute$=value] // 選取屬性的值以value為結(jié)束的元素。
6. [attribute*=value] // 選取屬性的值含有value的元素。
7. [selector1] [selector2] [selectorN] //復(fù)合屬性選擇器。$(“div[id][name*=test]“)選取擁有屬性id，且屬性name的值含有“test”的div元素
jQuery子元素過(guò)濾選擇器的過(guò)濾規(guī)則相對(duì)于其它的選擇器稍微有些復(fù)雜。
1. :nth-child(index/even/odd/equation) // 選取每個(gè)父元素下的第index個(gè)子元素或者奇偶元素。
2. :first-child // 選取每個(gè)父元素的第一個(gè)子元素
3. :last-child // 選取每個(gè)父元素的最后一個(gè)子元素
jQuery表單對(duì)象屬性過(guò)濾選擇器主要是對(duì)所選擇的表單元素進(jìn)行過(guò)濾，例如選擇不可用的表單元素、被選中的下拉框、多選框等等。
1. :enabled // 選取所有可用的表單元素。$(“#form1 :enabled”)選取id為“form1”的表單內(nèi)的所有可用元素。
2. :disabled // 選取所有不可用的表單元素。
3. :checked // 選取所有被選中的元素。$(“input:checked”)選取所有被選中的元素。
4. :selected // 選取所有被選中的選項(xiàng)元素。$(“select :selected”)選取所有被選中的選項(xiàng)元素(option)。
jQuery中引入了表單選擇器，讓我們能極其方便地獲取到一個(gè)表單中的某個(gè)或某類(lèi)型的元素。