1. 基本選擇器
?基本選擇器是JQuery最常用的選擇器，也是最簡(jiǎn)單的選擇器，它通過(guò)元素id、class和標(biāo)簽名來(lái)查找DOM元素（在網(wǎng)頁(yè)中id只能使用一次，class允許重復(fù)使用）。所謂的網(wǎng)頁(yè)中id只能使用一次的意思是說(shuō)，一個(gè)網(wǎng)頁(yè)中的id是不可以重復(fù)的，也就是具有唯一性。

1、#id 用法: $("#myDiv"); 返回值 單個(gè)元素的組成的集合 說(shuō)明: 這個(gè)就是直接選擇html中的id="myDiv" 2、Element 用法: $("div") 返回值 集合元素 說(shuō)明: element的英文翻譯過(guò)來(lái)是”元素”,所以element其實(shí)就是html已經(jīng)定義的標(biāo)簽元素,例如div, input, a等等. 3、class 用法: $(".myClass") 返回值 集合元素 說(shuō)明: 這個(gè)標(biāo)簽是直接選擇html代碼中class="myClass"的元素或元素組(因?yàn)樵谕籬tml頁(yè)面中 class是可以存在多個(gè)同樣值的) 4、* 用法: $("*") 返回值 集合元素 說(shuō)明: 匹配所有元素,多用于結(jié)合上下文來(lái)搜索 5、selector1, selector2, selectorN 用法: $("div,span,p.myClass") 返回值 集合元素 說(shuō)明: 將每一個(gè)選擇器匹配到的元素合并后一起返回.你可以指定任意多個(gè)選擇器, 并將匹配到的元素合 并到一個(gè)結(jié)果內(nèi)。其中p.myClass是表示匹配元素 p class="myClass"

2. 層級(jí)選擇器
?只有這個(gè)方法返回的是JQuery對(duì)象才能進(jìn)行鏈?zhǔn)讲僮鳌Ｈ绻胪ㄟ^(guò) DOM 元素之間的層次關(guān)系來(lái)獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器。

1 、ancestor descendant 用法: $("form input") ; 返回值 集合元素 說(shuō)明: 在給定的祖先元素下匹配所有后代元素.這個(gè)要和"arent > child"區(qū)分開。 祖先元素中查找，包含子元素和子元素的子元素。2、parent > child用法: $("form > input") ; 返回值 集合元素 說(shuō)明: 在給定的父元素下匹配所有子元素。注意:要區(qū)分好后代元素與子元素 父元素中查找，只包含子元素，不包含子元素的子元素。3、prev + next 用法: $("label + input") ; 返回值 集合元素 說(shuō)明: 匹配所有緊接在 prev 元素后的 next 元素4、prev ~ siblings 用法: $("form ~ input") ; 返回值 集合元素 說(shuō)明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含該元素在內(nèi),并且JQuery的siblings方法匹配的是和prev同輩的元素,其后輩元素不被匹配. 注意: ("prev ~ div") 選擇器只能選擇 "# prev"元素后面的同輩元素; 而 jQuery 中的方法 siblings() 與前后位置無(wú)關(guān), 只要是同輩節(jié)點(diǎn)就可以選取

3. 過(guò)濾選擇器
??找到一堆頁(yè)面元素，我們可以對(duì)這些元素加過(guò)濾條件，找到我們想要的這些元素，然后進(jìn)行過(guò)濾。通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出所需的 DOM 元素, 該選擇器都以 “:” 開頭。
??按照不同的過(guò)濾規(guī)則, 過(guò)濾選擇器可以分為基本過(guò)濾, 內(nèi)容過(guò)濾, 可見性過(guò)濾, 屬性過(guò)濾, 子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器。

<1>基礎(chǔ)過(guò)濾選擇器

1、:first用法: $("tr:first") ; 返回值 單個(gè)元素的組成的集合 說(shuō)明: 匹配找到的第一個(gè)元素2、:last用法: $("tr:last") 返回值 集合元素 說(shuō)明: 匹配找到的最后一個(gè)元素.與 :first 相對(duì)應(yīng).3、:not(selector)用法: $("input:not(:checked)") 返回值 集合元素 說(shuō)明: 去除所有與給定選擇器匹配的元素.有點(diǎn)類似于”非”,意思是沒有被選中的input(當(dāng)input的 type=”checkbox”).4、:even用法: $("tr:even") 返回值 集合元素 說(shuō)明: 匹配所有索引值為偶數(shù)的元素，從0開始計(jì)數(shù).js的數(shù)組都是從0開始計(jì)數(shù)的.例如要選擇table中的行,因?yàn)槭菑?開始計(jì)數(shù),所以table中的第一個(gè)tr就為偶數(shù)0.5、:odd用法: $("tr:odd") 返回值 集合元素 說(shuō)明: 匹配所有索引值為奇數(shù)的元素,和:even對(duì)應(yīng),從 0 開始計(jì)數(shù)6、:eq(index)用法: $("tr:eq(0)") 返回值 集合元素 說(shuō)明: 匹配一個(gè)給定索引值的元素.eq(0)就是獲取第一個(gè)tr元素.括號(hào)里面的是索引值,不是元素排列數(shù)7、:gt(index)用法: $("tr:gt(0)") 返回值 集合元素 說(shuō)明: 匹配所有大于給定索引值的元素8、:lt(index)用法: $("tr:lt(2)") 返回值 集合元素 說(shuō)明: 匹配所有小于給定索引值的元素9、:header(固定寫法)用法: $(":header").css("background", "#EEE") 返回值 集合元素 說(shuō)明: 匹配如 h1, h2, h3之類的標(biāo)題元素.這個(gè)是專門用來(lái)獲取h1,h2這樣的標(biāo)題元素10、:animated(固定寫法) 返回值 集合元素 說(shuō)明: 匹配所有正在執(zhí)行動(dòng)畫效果的元素

<2>內(nèi)容過(guò)濾選擇器
?內(nèi)容過(guò)濾選擇器的過(guò)濾規(guī)則主要體現(xiàn)在它所包含的子元素和文本內(nèi)容上。

1、:contains(text)用法: $("div:contains('John')") 返回值 集合元素 說(shuō)明: 匹配包含給定文本的元素.這個(gè)選擇器比較有用，當(dāng)我們要選擇的不是dom標(biāo)簽元素時(shí),它就派上 了用場(chǎng)了,它的作用是查找被標(biāo)簽”圍”起來(lái)的文本內(nèi)容是否符合指定的內(nèi)容的。2、:empty用法: $("td:empty") 返回值 集合元素 說(shuō)明: 匹配所有不包含子元素或者文本的空元素。3、:has(selector) 用法: $("div:has('.mini')")返回值 集合元素 說(shuō)明: 匹配含有選擇器所匹配的元素的元素。4、:parent用法: $("td:parent") 返回值 集合元素 說(shuō)明: 匹配含有子元素或者文本的元素.注意:這里是":parent”,可不是".parent”!感覺與上面講的”:empty”形成反義詞。

<3>屬性過(guò)濾選擇器
屬性過(guò)濾選擇器的過(guò)濾規(guī)則是通過(guò)元素的屬性來(lái)獲取相應(yīng)的元素。

1、[attribute]用法: $("div[id]") ; 返回值 集合元素 說(shuō)明: 匹配包含給定屬性的元素。例子中是選取了所有帶”id”屬性的div標(biāo)簽。2、[attribute=value]用法: $("input[name='newsletter']").attr("checked", true); 返回值 集合元素 說(shuō)明: 匹配給定的屬性是某個(gè)特定值的元素.例子中選取了所有 name 屬性是 newsletter 的 input 元素。3、[attribute!=value]$("div[title!='test']").css("background","yellow");用法: $(”input[name!='newsletter']“).attr("checked", true); 返回值 集合元素說(shuō)明: 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素。 此選擇器等價(jià)于:not此選擇器等價(jià)于:not([attr=value]),要匹配含有特定屬性但不等于特定值的元素,請(qǐng)使用[attr]:not([attr=value])。之前看到的:not 派上了用場(chǎng)。4、[attribute^=value]用法: $(”input[name^=‘news’]“) 返回值 集合元素 說(shuō)明: 匹配給定的屬性是以某些值開始的元素.,我們又見到了這幾個(gè)類似于正則匹配的符號(hào)。5、[attribute$=value]用法: $("input[name$='letter']") 返回值 集合元素 說(shuō)明: 匹配給定的屬性是以某些值結(jié)尾的元素。6、[attribute*=value]用法: $("input[name*='man']") 返回值 集合元素 說(shuō)明: 匹配給定的屬性是以包含某些值的元素。7、[attributeFilter1][attributeFilter2][attributeFilterN]用法: $("input[id][name$='man']") 返回值 集合元素 說(shuō)明: 復(fù)合屬性選擇器,需要同時(shí)滿足多個(gè)條件時(shí)使用.又是一個(gè)組合,這種情況我們實(shí)際使用的時(shí)候很常 用.這個(gè)例子中選擇的是所有含有 id 屬性,并且它的 name 屬性是以 man 結(jié)尾的元素。

<4>子元素過(guò)濾選擇器

1、:nth-child(index/even/odd/equation)$("div[class=one] :nth-child(2)").css("background","yellow");用法: $("ul li:nth-child(2)") 返回值 集合元素 說(shuō)明: 匹配其父元素下的第N個(gè)子或奇偶元素.這個(gè)選擇器和之前說(shuō)的基礎(chǔ)過(guò)濾(Basic Filters)中的 eq() 有些類似,不同的地方就是前者是從0開始,后者是從1開始。2、:first-child$("div[class=one] :first-child")用法: $("ul li:first-child") 返回值 集合元素 說(shuō)明: 匹配第一個(gè)子元素。':first' 只匹配一個(gè)元素,而此選擇符將為每個(gè)父元素匹配一個(gè)子元素。這里需要特別點(diǎn)的記憶下區(qū)別。3、:last-child用法: $("ul li:last-child") 返回值 集合元素 說(shuō)明: 匹配最后一個(gè)子元素.':last'只匹配一個(gè)元素,而此選擇符將為每個(gè)父元素匹配一個(gè)子元素。4、: only-child用法: $("ul li:only-child") 返回值 集合元素 說(shuō)明: 如果某個(gè)元素是父元素中唯一的子元素,那將會(huì)被匹配。如果父元素中含有其他元素,那將不會(huì)被匹配。意思就是:只有一個(gè)子元素的才會(huì)被匹配!

<5>表單對(duì)象屬性過(guò)濾選擇器
?此選擇器主要對(duì)所選擇的表單元素進(jìn)行過(guò)濾。

1、:enabled用法: $("input:enabled") 返回值 集合元素 說(shuō)明: 匹配所有可用元素。意思是查找所有input中不帶有disabled="disabled"的input。不為 disabled,當(dāng)然就為enabled。2、:disabled用法: $("input:disabled") 返回值 集合元素 說(shuō)明: 匹配所有不可用元素。與上面的enable是相對(duì)應(yīng)的。3、:checked用法: $("input:checked") 返回值 集合元素 說(shuō)明: 匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option)。這話說(shuō)起來(lái)有些繞口。4、:selected用法: $(”select option:selected”) 返回值 集合元素 說(shuō)明: 匹配所有選中的option元素.$("select>option:selected")

<6>表單選擇器

1、:input用法: $(":input") ; 返回值 集合元素 說(shuō)明:匹配所有 input, textarea, select 和 button 元素。2、:text用法: $(":text") ; 返回值 集合元素 說(shuō)明: 匹配所有的單行文本框。3、:password用法: $(":password") ; 返回值 集合元素 說(shuō)明: 匹配所有密碼框。4、:radio用法: $(":radio") ; 返回值 集合元素 說(shuō)明: 匹配所有單選按鈕。5、:checkbox用法: $(":checkbox") ; 返回值 集合元素 說(shuō)明: 匹配所有復(fù)選框。6、:submit用法: $(":submit") ; 返回值 集合元素 說(shuō)明: 匹配所有提交按鈕.7、:image用法: $(":image") 返回值 集合元素 說(shuō)明: 匹配所有圖像域。8、:reset用法: $(":reset") ; 返回值 集合元素 說(shuō)明: 匹配所有重置按鈕。9、:button用法: $(":button") ; 返回值 集合元素 說(shuō)明: 匹配所有按鈕.這個(gè)包括直接寫的元素button。10、:file用法: $(":file") ; 返回值 集合元素 說(shuō)明: 匹配所有文件域。11、:hidden用法: $("input:hidden") ; 返回值 集合元素 說(shuō)明: 匹配所有不可見元素，或者type為hidden的元素.這個(gè)選擇器就不僅限于表單了,除了匹配input中的hidden外,那些style為hidden的也會(huì)被匹配。

?

轉(zhuǎn)載于:https://www.cnblogs.com/wangdh666/p/10785906.html

總結(jié)

以上是生活随笔為你收集整理的13.jQuery选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。