Jquery選擇器分類應(yīng)用最全最新

1、 現(xiàn)在我們開始 Jquery的選擇器之旅哈哈。 下面的選擇器分類中， 帶有 過濾器的分類表示是 過濾選擇器， 否那么就是 選擇功 能的選擇器。 jQuery選擇器分為如下幾類： 說明 1. 點(diǎn)擊 名稱會(huì)跳轉(zhuǎn)到此方法的 jQuery官方說明文檔。 2. 可以在下節(jié)中的 jQuery選擇器實(shí)驗(yàn)室測試各種選擇器 1. 根底選擇器 Basics 名稱 說明 舉例 #id 根據(jù)元素Id選擇 $(divId) 選擇 ID 為divId的元素 element 根據(jù)元素的名稱選擇 , $(a)選擇所有 兀素 .class 根據(jù)元素的css類選擇 css $(.bgRed) 選擇 所用CSS類為bgRed的 元

2、素 * 選擇所有元素 $(*)選擇頁面所 有元素 selector1, selector2, selectorN 可以將幾個(gè)選擇器用,分隔開然后 再拼成一個(gè)選擇器字符串 會(huì)同時(shí)選中這幾 . 個(gè)選擇器匹配的內(nèi)容 $(#divId, a, .bgRed) 學(xué)習(xí)建議:大家暫時(shí)記住根底選擇器即可， 可以直接跳到下一節(jié) “jQuery選擇器 實(shí)驗(yàn)室進(jìn)行動(dòng)手練習(xí)， 以后再回來慢慢學(xué)習(xí)全部的選擇器， 或者用到的時(shí)候再回來查詢。 2. 層次選擇器 Hierarchy 名稱 說明 舉例 ancestor desc endant 使用form input的形式選中 form中的所有input元素.即 ancest

3、or( 祖先)為 from, descendant( 子孫)為 input. $(.bgRed div) 選擇CSS類為bgRed的 元素中的所有 元素. parent child 選擇parent的直接子節(jié)點(diǎn)child. $(.myListli) child必須包含在parent中并且父類是 parent 兀素. 選擇CSS類為myList兀 素中的直接子節(jié)點(diǎn)li對 象 . prev + next prev和next是兩個(gè)同級別的兀 素.選中在prev 元素后面的 next 元 素 . $(#hibiscus+im g)選在 id 為 hibiscus 兀 素后面的img對象. prev s

4、ibling s 選擇prev后面的根據(jù)siblings 過濾的元素 注:siblings 是過濾器 $(#someDivti tle) 選擇 id 為 someDiv 的對象后面所有帶有忸厄 屬性的元素 3. 根本過濾器 Basic Filters 名稱 說明 舉例 :first 匹配找到的第一個(gè)元素 查找表格的第一 行:$(tr:first) :last 匹配找到的最后一個(gè)元素 查找表格的最后一 行:$(tr:last) :not(selector) 去除所有與給定選擇器匹配的元 素 查找所有未選中的 input 兀素: $(input:not(:checked ) :even 匹配所有索

5、引值為偶數(shù)的元素，從 0開始計(jì)數(shù) 查找表格的1、3、 5.行:$(tr:even) :odd 匹配所有索引值為奇數(shù)的元素，從 0開始計(jì)數(shù) 查找表格的2、4、6 行:$(tr:odd) :eq(index) 匹配一個(gè)給定索引值的元素 注:index從0開始計(jì)數(shù) 查找第二 行:$(tr:eq(1) :gt(index) 匹配所有大于給定索引值的元素 注:index從0開始計(jì)數(shù) 查找第二第三行，即 索引值是i和2,也就是 比 0 大:$(tr:gt(0) :lt(index) 選擇結(jié)果集中索引小于 N的 elements 注:index從0開始計(jì)數(shù) 查找第一第二行，即 索引值是0和i,也就是 比 2

6、 小:$(tr:lt(2) :header 選擇所有h1,h2,h3 一類的 header 標(biāo)簽. 給頁面內(nèi)所有標(biāo)題 加上背景色： $(:header).css(bac kground, #EEE); :animated 匹配所有正在執(zhí)行動(dòng)畫效果的元 只有對不在執(zhí)行動(dòng) 素 畫效果的元素執(zhí)行一個(gè)動(dòng) 畫特效： $(#run).click(f unction()( $(div:not(:animated) ).animate( left: +=20 , 1000); ); 4. 內(nèi)容過濾器 Content Filters 名稱 說明 舉例 :contains(text) 匹配包含給定文本的元素 查找

7、所有包含 John的 div 兀 素:$(div:contains(Joh n) :empty 匹配所有不包含子元素或者文本的 空元素 查找所有不包含子元 素或者文本的空元 素:$(td:empty) :has(selector) 匹配含有選擇器所匹配的元素的元 素 給所有包含 元素 p 的div元素添加一個(gè) text 類： $(div:has(p).addClas s(test); :parent 匹配含有子元素或者文本 的元素 查找所有含有子元素 或者文本的 td元 素:$(td:parent) 5. 可見性過濾器 Visibility Filters 名稱 說明 舉例 :hidden 匹

8、配所有的不可見元素 注:在1.3.2 版本中，hidden 匹配自 身或者父類在文檔中不占用空間的元素 .如 果使用CSS visibility 屬性讓其不顯示但是 占位，那么不輸入hidden. 查找所有不可見的tr 元素:$(tr:hidden) :visible 匹配所有的可見元素 查找所有可見的tr 兀素:$(tr:visible) 6. 屬性過濾器 Attribute Filters 名稱 說明 舉例 attribute 匹配包含給定屬性的元素 查找所有含有id 屬性的div元素： $(divid) attribute=va lue 匹配給定的屬性是某個(gè)特定值的元 素 查找所有nam

9、e 屬性是 newsletter 的 input 兀素: $(inputname=newsl etter).attr(checked , true); attribute!=v alue 匹配給定的屬性是不包含某個(gè)特定 值的元素 查找所有 name 屬性不是newsletter 的 input 兀素: $(inputname!=new sletter).attr(check ed, true); attributeA=v alue 匹配給定的屬性是以某些值開始的 元素 $(inputnameA =news) attribute$=v alue 匹配給定的屬性是以某些值結(jié)尾的 元素 查找所有 n

10、ame 以letter結(jié)尾的 input 元素： $(inputname$=lette r) attribute*=v alue 匹配給定的屬性是以包含某些值的 元素 查找所有 name 包含 man 的 input 元 素： $(inputname*=man ) attributeFilt er1attributeFilte r2attributeFilter N 復(fù)合屬性選擇器，需要同時(shí)滿足多 個(gè)條件時(shí)使用。 找到所有含有id 屬性，并且它的name 屬 性是以man結(jié)尾的： $(inputidname$= man) 7. 子元素過濾器 Child Filters 名稱 說明 舉例 :nt

11、h-child(inde x/even/odd/equati on) 匹配其父元素下的第 N個(gè)子或奇偶元素 :eq(index) 只匹配一個(gè)元素，而這個(gè) 將為每一個(gè)父元素匹配子元素。：nth-child 從 1開始的，而:eq()是從0算起的！ 可以使用： nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2) 在每個(gè)ul查找第2 個(gè)li: $(ul li:nth-child(2) :first-child 匹配第一個(gè)子元素 :first 只匹配一個(gè)元素，而此選

12、擇符將 為每個(gè)父元素匹配一個(gè)子元素 在每個(gè)ul中查找第 一個(gè) li: $(ul li:first-child) :last-child 匹配最后一個(gè)子元素 :last只匹配一個(gè)元素，而此選擇符將 為每個(gè)父元素匹配一個(gè)子元素 在每個(gè)ul中查找最 后一個(gè)li: $(ul li:last-child) :only-child 如果某個(gè)元素是父元素中唯一的子元 素，那將會(huì)被匹配 如果父元素中含有其他元素，那將不會(huì) 被匹配。 在ul中查找是唯一 子元素的 li: $(ul li:only-child) 8. 表單項(xiàng)選擇擇器 Forms 名稱 說明 解釋 :input 匹配所有 input, textar

13、ea, select 和 button 兀素 查找所有的input元素： $(:input) :text 匹配所有的文本框 查找所有文本框： $(:text) :password 匹配所有密碼框 查找所有密碼框： $(:password) :radio 匹配所有單項(xiàng)選擇按鈕 查找所有單項(xiàng)選擇按鈕 :checkbox 匹配所有復(fù)選框 查找所有復(fù)選框： $(:checkbox) :submit 匹配所有提交按鈕 查找所有提交按鈕： $(:submit) :image 匹配所有圖像域 匹配所有圖像域： $(:image) :reset 匹配所有重置按鈕 查找所有重置按鈕： $(:reset) :button 匹配所有按鈕 查找所有按鈕： $(:button) :file 匹配所有文件域 查找所有文件域： $(:file) 9. 表單過濾器 Form Filters 名稱 說明 解釋 :enabled 匹配所有可用元素 查找所有可用的 input 兀素: $(input:enabled) :disabled 匹配所有不可用