教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

jQuery選擇器大全【jQuery選擇器分類及用法】

更新時(shí)間:2021年07月19日15時(shí)42分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

jQuery中的選擇器非常多，對(duì)于初學(xué)者來說，并沒有必要全部掌握，只記住常用的選擇器即可。當(dāng)需要使用其他不熟悉的選擇器時(shí)，可以通過查閱文檔查看具體的解釋。為了方便讀者查閱，接下來簡單介紹一些其他在開發(fā)中可能會(huì)用到的選擇器。

1. 獲取同級(jí)元素

選擇器 功能描述 示例
prev + next 獲取當(dāng)前元素緊鄰的下一個(gè)同級(jí)元素 $("div + .title")獲取緊鄰<div>的下一個(gè)class名為title的兄弟節(jié)點(diǎn)
prev ~ siblings 獲取當(dāng)前元素后的所有同級(jí)元素 $(".bar ~ li")獲取class名為bar的元素后的所有同級(jí)元素節(jié)點(diǎn)<li>

 2. 篩選元素

在jQuery中還有一些選擇器可以篩選元素，如表2所示。

表2 篩選元素

選擇器 功能描述 示例
:gt(index) 獲取索引大于index的元素 $("li:gt(3)")獲取索引大于3的所有<li>元素
:lt(index) 獲取索引小于index的元素 $("li:lt(3)")獲取索引小于3的所有<li>元素
:not(seletor) 獲取除指定的選擇器外的其他元素 $("li:not(li:eq(3))")獲取除索引為3外的所有<li>元素
:focus 匹配當(dāng)前獲取焦點(diǎn)的元素 $("input:focus")匹配當(dāng)前獲取焦點(diǎn)的<input>元素
:animated 匹配所有正在執(zhí)行動(dòng)畫效果的元素 $("div:not(:animated)")匹配當(dāng)前沒有執(zhí)行動(dòng)畫的<div>元素
:target 選擇由文檔URI的格式化識(shí)別碼表示的目標(biāo)元素 若URI為http://example.com/#foo，則$("div:target")將獲取<div id="foo">元素
:contains(text) 獲取內(nèi)容包含text文本的元素 $("li:contains('js')")獲取內(nèi)容中含“js”的<li>元素
:empty 獲取內(nèi)容為空的元素 $("li:empty")獲取內(nèi)容為空的<li>元素
:has(selector) 獲取內(nèi)容包含指定選擇器的元素 $("li:has('a')")獲取內(nèi)容中含<a>元素的所有<li>元素
:parent 選取帶有子元素或包含文本的元素 $("li:parent")選取帶有子元素或包含文本的li元素
:hidden 獲取所有隱藏元素 $("li:hidden")獲取所有隱藏的<li>元素
:visible 獲取所有可見元素 $("li:visible")獲取所有可見的<li>元素
3. 屬性選擇器

jQuery中還提供了根據(jù)元素的屬性獲取指定元素的方式。例如，含有class屬性值為current的<div>元素。常用的屬性選擇器如表3所示。

表3 屬性選擇器。

選擇器 功能描述 示例
[attr] 獲取具有指定屬性的元素 $("div[class]")獲取含有class屬性的所有<div>元素
[attr=value] 獲取屬性值等于value的元素 $("div[class='current']")獲取class等于current的所有<div>元素
[attr!=value] 獲取屬性值不等于value的元素 $("div[class!='current']")獲取class不等于current的所有<div>元素
[attr^=value] 獲取屬性值以value開始的元素 $("div[class^='box']")獲取class屬性值以box開始的所有<div>元素
[attr$=value] 獲取屬性值以value結(jié)尾的元素 $("div[class$='er']")獲取class屬性值以er結(jié)尾的所有<div>元素
[attr*=value] 獲取屬性值包含value的元素 $("div[class*='-']")獲取class屬性值中含有“-”符號(hào)的所有<div>元素
[attr~=value] 獲取元素的屬性值包含一個(gè)value，以空格分隔 $("div[class~='box']")獲取class屬性值等于“box”或通過空格分隔并含有box的<div>元素，如“t box”
[attr1][attr2]...[attrN] 獲取同時(shí)擁有多個(gè)屬性的元素 $("input[id][name$='usr']")獲取同時(shí)含有id屬性和屬性值以u(píng)sr結(jié)尾的name屬性的<input>元素

4. 子元素選擇器

利用子元素選擇器可以對(duì)子元素進(jìn)行篩選，常用的如表4所示。

表4 子元素選擇器

選擇器 功能描述
:nth-child(index/even/odd/公式) 索引index默認(rèn)從1開始，匹配指定index索引、偶數(shù)、奇數(shù)、或符合指定公式（如2n，n默認(rèn)從0開始）的子元素
:first-child 獲取第一個(gè)子元素
:last-child 獲取最后一個(gè)子元素
:only-child 如果當(dāng)前元素是唯一的子元素，則匹配
:nth-last-child(index/even/odd/公式) 選擇所有它們父元素的第n個(gè)子元素。計(jì)數(shù)從最后一個(gè)元素開始到第一個(gè)
:nth-of-type(index/even/odd/公式)) 選擇同屬于一個(gè)父元素之下，并且標(biāo)簽名相同的子元素中的第n個(gè)子元素
:first-of-type 選擇所有相同的元素名稱的第一個(gè)子元素
:last-of-type 選擇所有相同的元素名稱的最后一個(gè)子元素
:only-of-type 選擇所有沒有兄弟元素，且具有相同的元素名稱的元素
:nth-last-of-type(index/even/odd/公式) 選擇屬于父元素的特定類型的第n個(gè)子元素，計(jì)數(shù)從最后一個(gè)元素到第一個(gè)

5. 表單選擇器

jQuery還提供了針對(duì)表單元素的選擇器，用來方便表單開發(fā)，如表5所示。

表5 表單選擇器

選擇器 功能描述
:input 獲取頁面中的所有表單元素，包含<select>以及<textarea>元素                                       
:text 選取頁面中的所有文本框
:password 選取所有的密碼框
:radio 選取所有的單選按鈕
:checkbox 選取所有的復(fù)選框
:submit 獲取submit提交按鈕
:reset 獲取reset重置按鈕
:image 獲取type="image"的圖像域
:button 獲取button按鈕，包括<button></button>和type="button"
:file 獲取type="file"的文件域
:hidden 獲取隱藏表單項(xiàng)
:enabled 獲取所有可用表單元素
:disabled 獲取所有不可用表單元素
:checked 獲取所有選中的表單元素，主要針對(duì)radio和checkbox
:selected 獲取所有選中的表單元素，主要針對(duì)select

需要注意的是，$("input")與$(":input")雖然都可以獲取表單項(xiàng)，但是它們表達(dá)的含義有一定的區(qū)別，前者僅能獲取表單標(biāo)簽是<input>的控件，后者則可以同時(shí)獲取頁面中所有的表單控件，包括表單標(biāo)簽是<select>以及<textarea>的控件。







猜你喜歡：

jQuery選擇器基本語法格式和jQuery選擇器的優(yōu)勢(shì)

jQery網(wǎng)頁編程如何使用篩選選擇器？

怎樣給:root選擇器設(shè)置樣式？

傳智教育HTML前端與移動(dòng)開發(fā)高手班

0 分享到：
和我們?cè)诰€交談！