首頁技術(shù)文章正文

jQuery選擇器及用法大全

更新時間:2021-07-19 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

1. 獲取同級元素

選擇器功能描述示例
prev + next獲取當(dāng)前元素緊鄰的下一個同級元素$("div + .title")獲取緊鄰<div>的下一個class名為title的兄弟節(jié)點
prev ~ siblings獲取當(dāng)前元素后的所有同級元素$(".bar ~ li")獲取class名為bar的元素后的所有同級元素節(jié)點<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)前獲取焦點的元素$("input:focus")匹配當(dāng)前獲取焦點的<input>元素
:animated匹配所有正在執(zhí)行動畫效果的元素$("div:not(:animated)")匹配當(dāng)前沒有執(zhí)行動畫的<div>元素
:target選擇由文檔URI的格式化識別碼表示的目標(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屬性值中含有“-”符號的所有<div>元素
[attr~=value]獲取元素的屬性值包含一個value,以空格分隔$("div[class~='box']")獲取class屬性值等于“box”或通過空格分隔并含有box的<div>元素,如“t box”
[attr1][attr2]...[attrN]獲取同時擁有多個屬性的元素$("input[id][name$='usr']")獲取同時含有id屬性和屬性值以usr結(jié)尾的name屬性的<input>元素

4. 子元素選擇器

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

表4 子元素選擇器

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

5. 表單選擇器

jQuery還提供了針對表單元素的選擇器,用來方便表單開發(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獲取隱藏表單項
:enabled獲取所有可用表單元素
:disabled獲取所有不可用表單元素
:checked獲取所有選中的表單元素,主要針對radio和checkbox
:selected獲取所有選中的表單元素,主要針對select

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






猜你喜歡:

Jquery常用的選擇器有哪些?用途有什么不同?

jQuery怎樣使用選擇器獲取元素?

jQery選擇器怎樣篩選元素?

JQuery--數(shù)據(jù)庫階段總結(jié)

黑馬程序員前端高手班培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!