有了Jquery的選擇器，吃飯飯飯香，身體倍棒……
1.基本
我們知道jquery最常用的就是選擇器了，我們看一下jqueryAPI中的 選擇器—基本中有5種情況 class ,id ,element, *,還有一個(gè)多選擇器，這里我們想一下css樣式的寫法
css樣式也有幾種情況：1.類樣式 2.id樣式 3.標(biāo)簽樣式，
如果有一個(gè)aa的類 ，那么我們定義aa的樣式就要寫成 .aa{}
如果有一個(gè)bb的id，那么我們定義bb的樣式就要寫成 #bb{}
如果有標(biāo)簽<div></div>,那么我們定義的樣式就寫成 div{}
如果我們要定義所有的標(biāo)簽樣式，那我們就寫成 *{} （當(dāng)然這樣簡(jiǎn)寫不太好）
如果我們要定義多個(gè)標(biāo)簽之類的就用分號(hào)來分開 比如 .aa,#bb,div{} 就定義了 class為aa，id為bb，標(biāo)簽為div的樣式了。
我們看到上面5個(gè)如果 ，在和jquery的5個(gè)基本的選擇器對(duì)比一下
如果我們要選擇一個(gè)aa的類就寫成 $(“.aa”)
如果我們要選擇一個(gè)bb的id就寫成$(“#bb”)
如果我們要選擇div的標(biāo)簽就寫成$(“div”)
如果我們要選擇所有就寫成 $(“*”)
如果我們要選擇多個(gè)對(duì)象就寫成 $ (“.aa,#bb,div”)
對(duì)比一下，發(fā)現(xiàn)基本的選擇器完全是按在css的語法在操作，是不是很容易呢
2層次
我們現(xiàn)在知道了上面5個(gè)選擇器的寫法之后，現(xiàn)在我們來考慮如果對(duì)層次做選擇器，
先想一下什么是層次，其實(shí)說的就是 HTML的DOM結(jié)構(gòu) 一層一層的，或者說XML的結(jié)構(gòu)層次
那我們就打開jquery的Api ，發(fā)現(xiàn)有4個(gè)關(guān)于層次的選擇器。
歸納一下就是 a空格b，a>b ，a+b，a~b 當(dāng)然我這里只是為了少打幾個(gè)字而已，
比如有如下的一個(gè)結(jié)構(gòu)

我們現(xiàn)在想選擇id為aa節(jié)點(diǎn)下所有的span節(jié)點(diǎn) ，就用 $(“#aa span”)
我們現(xiàn)在想選擇id為aa節(jié)點(diǎn)下第一層的span 就是span中文本為 3，4的兩個(gè)，就用 $(“#aa >span”)
我們現(xiàn)在想得到跟在class為bb后的那個(gè)span 就是span中文本為3的那個(gè)，就用$(“.bb+span”)
現(xiàn)在我們想得到class為bb后所有的span 就用$(“.bb~span”)
總結(jié)一下：第一個(gè)的寫法還是css樣式的寫法一樣 用空格表示節(jié)點(diǎn)下的元素
第二個(gè)用>來表示子節(jié)點(diǎn)，和空格不同的是它只作用在第一層
第三個(gè)第四個(gè)都是用來表示跟隨節(jié)點(diǎn)，只不過不同的是用+號(hào)表示緊接著的用~表示所有跟隨的 我們是需要記住 (空格 > + ~ )四個(gè)符號(hào)就可以了
3簡(jiǎn)單
我們知道了基本的選擇器和層次的選擇器，有時(shí)候我們選擇出的是多個(gè)比如

我們想得到ul li的第一個(gè)（first） ，最后一個(gè)（last），基數(shù)行（odd），偶數(shù)行（even）匹配第三個(gè)（eq（2）），匹配大于2行（gt（1）），匹配小于第三行（lt（2）），這里說了7個(gè)那么我們要怎么來寫這個(gè)選擇器呢，比如匹配第一個(gè)$(“ul li:first”) ，匹配第三個(gè)$(“ul li:eq(2)”) ,其他的就不寫了
這里我們想一下css中 a鏈接的幾種樣式的的寫法 a：hover a:link ……是不是一樣呢
好了 這里我們看了7種，在看看api 還有3種是什么呢，
1 :not 去除所有與給定選擇器匹配的元素 語法一樣 $(“ul li:not(#aa)”) 意思是去掉在ul li里面的含有id為aa的元素元素 我們用$(“ul li”)能夠得到4個(gè)li 用 $(“ul li:not(#aa)”)就去掉了第一個(gè)li 只得到了三個(gè)
2:header 只是用來選擇h1 h2 h3 ……這樣的標(biāo)題
3:animated匹配執(zhí)行動(dòng)畫的元素
還是總結(jié)一下，上面的這幾個(gè)其實(shí)就是對(duì)已經(jīng)選擇出來的在一次的做篩選。建立在基礎(chǔ)和層次上面。
4 文本 可見性
繼續(xù)往下看api，文本中有4個(gè)函數(shù)，當(dāng)然功能還是對(duì)已經(jīng)選擇出來的內(nèi)容做再次的篩選
上面是對(duì)節(jié)點(diǎn)的篩選，現(xiàn)在我們要對(duì)內(nèi)容篩選

包含指定文本 $("div:contains(xxiu)") 我們希望我們所選擇的div的文本中含有xxiu這個(gè)字符串
匹配空文本 $("div:empty") 第四個(gè)div節(jié)點(diǎn)下什么都沒有，就匹配它了
匹配含有某個(gè)節(jié)點(diǎn)的元素 匹配含有a節(jié)點(diǎn)的div $(“div:has(a)”)
匹配不為空文本的和2剛好相反 $(“div:parent”) 就匹配了前三個(gè)div
總結(jié)一下 文本匹配主要是做了 文本（1）和節(jié)點(diǎn)匹配（3） ，和匹配無文本或節(jié)點(diǎn)（2） 匹配有文本節(jié)點(diǎn)（4），兩句話：有沒有文本或節(jié)點(diǎn)，有什么文本和節(jié)點(diǎn)
然后我們?cè)诳匆幌驴梢娦?，可見性很容易理解就兩種情況 可見:hidden選擇可見節(jié)點(diǎn)或不可見:visible選擇不可見節(jié)點(diǎn)，沒什么好說的
5 屬性選擇器
我們先看看最基本的屬性選擇器

如上面的節(jié)點(diǎn)，我們想選擇含有id的節(jié)點(diǎn)，我們?nèi)绻靡郧暗姆椒ㄒ趺醋瞿亍?
用多選擇方式 $(“#aa,#bb”) 得到了我們想要的，但是如果有N個(gè)，那不是要跟很長(zhǎng)嗎，我們都是很懶的，于是就有了屬性選擇器 $(“div[id]”)就得到了我們想要的結(jié)果，對(duì)name做選擇$(“div[name]”) 但是我們只想得到name為xxiu的 那我們就用$(“div[name ='zhang']”)
得到不為zhang的$(“div[name ！='zhang']”)，得到以zh開始的$(“div[name ^='zh']”)
以xxiu結(jié)尾的$(“div[name $='zhang']”),包含ang的$(“div[name *='ang']”)
或者是有id且包含xxiu的$(“div[id][name *='xxiu']”)
好，看了上面一對(duì)東西，肯定是有點(diǎn)暈了，總結(jié)一下
1 有什么[id] 等于什么[id='aa'] 不等于什么[id!='aa']
2 以什么開始 ^= 以什么結(jié)束$= 匹配什么 *= (完全是正則表達(dá)式的語法嗎)
3 多屬性選擇 $(“div[id][name *='xxiu']”)
6 子元素
1匹配子元素中的第一個(gè)$("ul li:first-child") 最后一個(gè)$("ul li:last-child")
2 匹配在子元素中是唯一的$("ul li:only-child")
3匹配對(duì)于的元素$("ul li:nth-child(2)") 和$(“ul li:eq(1)”)一樣，前者是從1開始計(jì)數(shù)，后者是從0開始計(jì)數(shù)
7表單
看看就知道是input中幾種表單 $(“:text”) 得到文本表單 $(“:checkbox”) 得到復(fù)選表單等等 看看API就知道是怎么個(gè)回事了
我們用前面的選擇方式 可以這樣寫$(“input[type='text']”) 但是少打幾個(gè)字總比多大幾個(gè)要好，$(“:text”)這樣寫是不是清爽的多呢
8 表單屬性
1 可用 enabled和不可用 disabled
找出
2 被選中checked 和選擇selected
好到這里 所有的API都過了一遍，對(duì)選擇器基本上就差不多了，差的就是自己去寫幾句代碼玩玩。本文中沒有代碼，只是對(duì)API歸納一下，如果要看代碼，看Jquery文檔就可以了

最新評(píng)論