? 最使用近工作中常用到jQuery，在過濾器的使用方面生疏，所以本文整理了些有關知識點，以便于自己查找方便，或為朋友們提供方便！

一、基本選擇器

$("#test") 選取id為test的元素；

$(".test") 選取class為test的元素；

$("p") 選取p元素；

$("div , span ,p , myClass")選取所在div span 和擁有class為myClass的標簽的一組元素；

$("*") 選取所在的元素。

?

二、層次選擇器

$("div span")選取div里面的所有span元素；

$("div > span")選取div元素下的元素名是span的子元素；

$(.one + div)選取class為one的下一個div元素；

$("#one~div")選取id為one的元素后面的所有div兄弟元素；

?

可以用next()方法來代替$("prev + next")

$(".one+div") <==> $(".one").next("div");

?

可用nextAll()代替$("prev~siblings")

$("#prev~div") <==> $("#prev").nextAll("div");

?

siblings()方法與前后位置無關，只要是同輩節點就能匹配。

?

三、過濾選擇器

1、基本過濾選擇器

?$("div:first")??選取第1個元素；

?$("div:last")?選取最后一個元素；

?$("input:not(.myClass)")?去除所有與給定選擇器匹配的元素；

?$("ul li:even")?選取索引是偶數的所有元素，索引從0開始；

$("ul li:odd")?選取索引是奇數的所有元素，索引從1開始；

?$("ul:eq(index)")?選取索引等于index的元素，index從0開始；

?$("ul li:gt(index)")?選取索引大于index的元素，index從0開始,不包括index；

?$("ul li:lt(index)")?選取索引小于index的元素，index從0開始,不包括index；

?$(":header") 選取所有標題元素，如：h1 h2 h3...；

?$("div:animated")?選取當前正在執行動畫的所有元素。

2、內容過濾選擇器

?$("div:contains('我')")?選取含有文本內容text的元素；

?$("div:empty")?選取不包含子元素或文本的空元素；

?$("div:has(p)")?選取含有選擇器所匹配元素的元素；

?$("div:parent")?選取含有子元素或文本的元素。

3、可見性過濾選擇器

?$(":hidden")?選取所有不可見元素；

?$("div:visible")?選取所有可見元素；

$(":hidden")==》選取所有不可見元素。包括：<input type="hidden"/> 、<div style="display:none;"> ?、<div style="visibility=hidden">等元素。

4、屬性過濾選擇器

$("div[id]")?選取擁有此屬性的元素；

$("div[title=test]")?選取屬性值為test的元素；

$("div[titil!=test]")?選取屬性值不等于test的元素；

$("div[titil^=test]")?選取屬性值以test開始的元素；

$("div[titil$=test]")?選取屬性值以test結束的元素；

$("div[titil*=test]")?選取屬性值含有test值的元素；

$("div[id][title=test]")?用屬性選擇器合并成一個復合屬性選擇器，滿足多個條件，選取擁有屬性id ， 并且屬性title 等于test的div元素。?

5、子元素過濾選擇器

$("ul li:nth-child(3)")???nth-child(index/even/odd)，選取每個父元素下的第index個子元素或奇偶元素，index從1開始；

$("ul li:first-child")?選取每個父元素的第1個子元素；

$("ul li:last-child")?選取第個父元素下的最后一個子元素；

$("div:only-child") ?如果某個元素是它父元素中惟一的子元素，那么將會被匹配。如果父元素中含有其它元素，剛不會匹配；

:nth-child(3n) =>選取每個父元素下的索引值是3倍數的元素(n從0開始)，

:nth-child(even) =>選取每個父元素下的偶子元素，

:nth-child(odd) =>選取每個父元素下的奇子元素。?

6、表單對象屬性過濾選擇器

$("#form1:enabled")?選取所有可用元素；

$("#form1:disabled")?選取所有不可用元素；

$("input:checked")?選取所有被選中的元素；

$("select:selected")?選取所有被選中的選項元素。

四、表單選擇器

?$(":input")?選取所有input 、textarea 、select 、button元素；

?$(":text")?選取所有的單行文本框；

?$(":password")?選取所有的密碼框；

?$(":radio")?選取所有的單選框；

?$(":checkbox")?選取所有的多選框；

?$(":submit")?選取所有的提交按鈕；

?$(":image")?選取所有的圖像按鈕；

?$(":reset")?選取所有的重置按鈕；

?$(":button")?選取所有的按鈕；

?$(":file")?選取所有的上傳域；

?$(":hidden")?選取所有的不可見元素。

如有錯誤，希望朋友們提出來多提寶貴意見，共同提升！

轉載于:https://www.cnblogs.com/lidelin/p/7588498.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jQuery选择器整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。