jQuery選擇器
jQuery選擇器完全繼承了CSS的風(fēng)格瑰抵。學(xué)會(huì)使用選擇器是學(xué)習(xí)jQuery的基礎(chǔ)吊趾，jQuery的行為規(guī)則必須在獲取到元素之后才能生效古戴。
jQuery選擇器相比較getELementById()傳統(tǒng)函數(shù)簡(jiǎn)潔的多吁伺，而且還能避免某些錯(cuò)誤陌兑。當(dāng)使用getELementById('#cr')時(shí)，若網(wǎng)頁(yè)中沒(méi)有id為cr的元素時(shí)偷厦，此時(shí)會(huì)報(bào)錯(cuò)商叹。而使用jQuery就不會(huì)報(bào)錯(cuò)，jQuery獲得的始終是一個(gè)對(duì)象只泼。
基本選擇器
- id選擇器
$('#test') - 類選擇器
$('.test') - 元素選擇器
$('p') - 通配符選擇器
$('*') //選取所有的元素 - 選擇多個(gè)元素并集體返回
$(div,span,p.myClass) //選取所有的<div>,<span>以及class為myClass的<p>標(biāo)簽的一組元素
層次選擇器
$('ancestor descendant') //選取ancestor元素里的所有descendant（后代）元素$('parent>chlid') //只選取parent元素下的child子元素$('prev+next') //選取緊鄰在prev元素后的下一個(gè)next同輩元素$('prev~siblings') //選取緊鄰在prev元素后的所有siblings同輩元素
可以使用next()方法來(lái)替代$('.prev+next')選擇器剖笙。$('.prev+next') == $('prev').next('next')
可以使用nextAll()方法來(lái)替代$('#prev~siblings')選擇器。$('#prev~next') == $('#prev').nextAll('next')
過(guò)濾選擇器
1. 基本過(guò)濾選擇器
- :first 選取第一個(gè)元素（返回單個(gè)元素）
$('div:first')選取所有div元素中的第一個(gè)div元素 - :last 選取最后一個(gè)元素（返回單個(gè)元素）
$('div:last')選取所有div元素中的最后一個(gè)div元素 - :not(selector) 去除所有與給定選擇器匹配的元素（返回集合元素）
$('input:not(.myClass)')選取class不是myClass的input元素 - :even 選取索引是偶數(shù)的所有元素请唱，索引從0開(kāi)始（返回集合元素）
$('input:even')選取索引是偶數(shù)的input元素 - :odd 選取索引是奇數(shù)的所有元素弥咪，index從0開(kāi)始（返回集合元素）
$('input:odd')選取索引是奇數(shù)的input元素 - :eq(index) 選取索引是index的元素，索引從0開(kāi)始（返回單個(gè)元素）
$('input:eq(1)')選取索引是1的input元素 - :gt(index) 選取索大于index的元素十绑，索引從0開(kāi)始（返回集合元素）
$('input:gt(1)')選取索引大于1的input元素 - :lt(index) 選取索引小于index的元素聚至，索引從0開(kāi)始（返回集合元素）
$('input:lt(1)')選取索引小于1的input元素 - :header 選取所有的標(biāo)題元素，例如h1,h2,h3...（返回集合元素）
$(':header')選取網(wǎng)頁(yè)中的所有標(biāo)題 - :animated 選取所有正在執(zhí)行動(dòng)畫(huà)的元素（返回集合元素）
$('div:animated')選取正在執(zhí)行動(dòng)畫(huà)的div元素 - :focus 選取當(dāng)前獲取焦點(diǎn)的元素 （返回集合元素）
$(':focus') 選取當(dāng)前獲取焦點(diǎn)的元素
2.內(nèi)容過(guò)濾選擇器
內(nèi)容過(guò)濾選擇器的過(guò)濾規(guī)則主要體現(xiàn)在它所包含的子元素和文本內(nèi)容上本橙。
- :contains(text) 選取文本內(nèi)容為text的元素（返回集合元素）
$('div:contains('me')') 選取含有文本me的div元素 - :empty 選取不包含子元素或者文本的空元素（返回集合元素）
$('div:empty') 選取不包含子元素或者文本的空元素 - :has(selector) 選取選擇器所匹配的元素的元素（返回集合元素）
$('div:selector(p)') 選取含有p元素的div元素 - :parent 選取包含子元素或者文本的元素（返回集合元素）
$('div:parent') 選取包含子元素或者文本的div元素
3. 可見(jiàn)性過(guò)濾選擇器
可見(jiàn)性過(guò)濾選擇器是根據(jù)元素的可見(jiàn)和不可見(jiàn)狀態(tài)來(lái)選中相應(yīng)的元素
- :hidden 選取所有不可見(jiàn)的元素（返回集合元素）
$(':hidden') 選取選取所有不可見(jiàn)的元素 - :visible 選取所有可見(jiàn)的元素（返回集合元素）
$(':visible') 選取選取所有可見(jiàn)的元素
在可見(jiàn)性過(guò)濾選擇器扳躬，需要注意選擇器:hidden，它不僅包含樣式屬性display為none的元素甚亭，也包括文本隱藏域(<input type='hidden'/>)和visibility:hidden之類的元素
4. 屬性過(guò)濾選擇器
屬性過(guò)濾選擇器的規(guī)則是通過(guò)元素的屬性來(lái)獲取相應(yīng)的元素贷币。
- [attr] 選取擁有此屬性的元素（返回集合元素）
$('div[id]') 選取擁有屬性id的div元素 - [attr=value] 選取屬性值為value的元素（返回集合元素）
$('div[title=test]') 選取屬性title為test的div元素 - [attr=!value] 選取屬性值不為value的元素（返回集合元素）
$('div[title=!test]') 選取屬性title為不test的div元素（沒(méi)有title的屬性也會(huì)被選中） - [attr^=value] 選取屬性值以value開(kāi)頭的元素（返回集合元素）
$('div[title^=test]') 選取屬性title以test開(kāi)頭的div元素 - [attr$=value] 選取屬性值以value結(jié)尾的元素（返回集合元素）
$('div[title$=test]') 選取屬性title以test結(jié)尾的div元素 - [attr*=value] 選取屬性值包含value的元素（返回集合元素）
$('div[title*=test]') 選取屬性title中含有test的div元素
5. 子元素過(guò)濾選擇器
子元素過(guò)濾選擇器的規(guī)則相對(duì)應(yīng)其他選擇器有些復(fù)雜，需要將元素的子元素和父元素區(qū)分清楚狂鞋，還要注意它和普通過(guò)濾選擇器的區(qū)別片择。
- :nth-child(index/even/odd/equation) 選取每個(gè)父元素下的第index個(gè)子元素或奇偶元素潜的。（index從1算起）**（返回集合元素）
:eq()只匹配一個(gè)元素骚揍，而:nth-child()將為每一個(gè)父元素匹配子元素 - :first-child 選取每一個(gè)父元素的第一個(gè)子元素（返回集合元素）
$('ul li:first').css('color','#f0833c'); //選取所有l(wèi)i中的第一個(gè)li元素
$('ul li:first-child(odd)').css('color','#0f00c3'); //選取每一個(gè)父元素ul中的第一個(gè)子元素
- :last-child 選取每一個(gè)父元素的最后一個(gè)子元素（返回集合元素）
- :only-child 如果某個(gè)元素是它父元素中的唯一的子元素，那么它將會(huì)被匹配。如果父元素中含有其它子元素就不被匹配信不。（返回集合元素）
$('ul li:only-child'); 在ul中選取是唯一子元素的li元素
千萬(wàn)注意:ntn-child中的index是從1開(kāi)始的
6. 表單對(duì)象屬性過(guò)濾選擇器
- :enabled 選取所有可用元素（返回集合元素）
$('#form1:enabled') 選取id為form1中所有可用的元素 - :disabled 選取所有不可用元素（返回集合元素）
$('#form1:disabled ') 選取id為form1中所有不可用的元素 - :checked 選取所有被選中的元素嘲叔。單選框、復(fù)選框（返回集合元素）
$('input:checked') 選取所有被選中的input元素 - :selected選取所有被選中的選項(xiàng)元素抽活。下拉列表（返回集合元素）
$('#form1:selected') 選取所有被選中的選項(xiàng)的元素
表單選擇器
為了使用戶能夠更加靈活的操作表單硫戈，jQuery特地加入了表單選擇器。
- :input 選取所有的input下硕、textarea丁逝、select、button元素
- :text 選取所有的單行文本框
- :password 選取所有的密碼框
- :radio 選取所有的單選框
- checkbox 選取所有的復(fù)選框
- :submit 選取所有的提交按鈕
- :img 選取所有的圖像按鈕
- :reset 選取所有的重置按鈕
- :button 選取所有的按鈕
- :file 選取所有的上傳域
- hidden 選取所有的不可見(jiàn)元素
關(guān)于選擇器中的空格問(wèn)題
- .test .aa = E F是后代選擇器
- .test.aa 是作用于一個(gè)元素上梭姓，只有這個(gè)元素同時(shí)包含這兩個(gè)類才會(huì)有效果
帶空格的選擇器之間的關(guān)系是“父子關(guān)系”霜幼，并且可以是非直接父子關(guān)系。不帶空格的選擇條件之間的邏輯為“且”
