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