首頁  >  文章  >  web前端  >  jquery選擇器的幾種類型是什麼

jquery選擇器的幾種類型是什麼

WBOY
WBOY原創
2022-05-10 14:52:575910瀏覽

jquery選擇器有4種類型,分別是:1、基本選擇器,透過元素的id、class等來找出元素;2、層次選擇器,根據層次關係取得特定元素;3、過濾選擇器,包括內容過濾、可見性過濾、屬性過濾、和子元素過濾;4、表單選擇器,可以傳回元素的集合。

jquery選擇器的幾種類型是什麼

本教學操作環境:windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery選擇器的幾種類型是什麼

一、基本選擇器

基本選擇器是jQuery中最常用也是最簡單的選擇器,它透過元素的id、class和標籤名稱等來尋找DOM元素。

1、ID選擇器#id

描述:根據給定的id匹配一個元素, 傳回單一元素(註:在網頁中,id名稱不能重複)

範例:$("#test") 選取id 為test 的元素

#2、類別選擇器.class

描述:根據給定的類別名稱匹配元素,傳回元素集合

範例:$(".test") 選取所有class為test的元素

3、元素(標籤)選擇器element

描述:根據給定的元素名稱來匹配元素,返回元素集合

#範例:$("p") 選取所有的

元素$("div ") :選取所有的div標籤

4、*

#描述:符合所有元素,傳回元素集合

範例:$("* ") 選取所有的元素

5、selector1,selector2,...,selectorN(並集選擇器)

##描述:將每個選擇器配對到的元素合併後一起返回,返回合併後的元素集合

範例:$("p,span,p.myClass") 選取所有

,和class為myClass的< ;p>標籤的元素集合

二、層次選擇器

層次選擇器根據層次關係取得特定元素。

1、後代選擇者 

範例:$("p span") 選取

元素裡的所有的元素(註:後代選擇器選擇父元素所有指定選擇的元素,不管是兒子級,還是孫子級)

#2、子選擇器$("parent>child")

範例:$("p>span") 選擇

元素下的所有元素(註:子選擇器只選擇直屬於父元素的子元素)

#3、同輩選擇器$("prev next")

說明:選取緊接在prev元素後的next元素,返回元素集合

範例:$(". one p") 選取class為one的下一個

同儕元素集合

4、同儕選擇器$("prev~siblings")

#描述:選取prev元素後的所有siblings元素,回傳元素集合

範例:$("#two~p")選取id為two的元素後所有

同儕元素集合

三、過濾選擇器

1>基本過濾選擇器

1、:first

描述:選取第一個元素,傳回單一元素

範例:$("p:first") 選取所有

元素中第一個

元素

2、 :last

描述:選取最後一個元素,傳回單一元素

範例:$("p:last") 選取所有

元素中最後一個

元素

3、 :not(selector)

描述:去除所有與給定選擇器相符的元素,返回元素集合

範例:$("input:not(.myClass)" ) 選取class不是myClass的元素

4、 :even

描述:選取索引是偶數的所有元素,索引從0開始,傳回元素集合

5、 :odd

描述:選取索引是奇數的所有元素,索引從0開始,傳回元素集合

6、:eq(index)

描述:選取索引等於index的元素,索引從0開始,傳回單一元素

7、 :gt(index)

描述:選取索引大於index的元素,索引從0開始,傳回元素集合

8、 :lt(index)

描述:選取索引小於index的元素,索引從0開始,傳回元素集合

9、 :focus

描述:選取目前取得焦點的元素

2>內容過濾選擇器

1、:contains(text)

描述:選取含有文字內容為text的元素,傳回元素集合

範例:$("p:contains('我')") 選取含有文字「我」的元素

2、 :empty

說明:選取不包含子元素或文字元素的空元素,傳回元素集合

範例:$("p:empty") 選取不包含子元素或文字元素的空

元素(

3、:has(selector)

說明:選取含有選擇器所符合的元素的元素,傳回元素集合

範例:$("p:has(p)") 選取含有

元素的

元素(

4、:parent

說明:選取含有子元素或文字的元素,傳回元素集合

範例:$("p:parent") 選取含有子元素或文字元素的

元素(

文字< ;/p>)

3>可見性過濾選擇器

1、:hidden

描述:選取所有不可見的元素,返回元素集合

2、:visible

描述:選取所有可見的元素,傳回元素集合

4>屬性過濾選擇器(傳回元素集合)

1、[attribute]

範例:$("p[id]") 選取擁有id屬性的p元素

2、[attribute=value]

範例:$("input[name=text]") 選取擁有name屬性等於text的input元素

3、[attribute!=value]

範例: $("input[name!=text]") 選取擁有name屬性不等於text的input元素

#4、[attribute^=value]

範例:$("input[name ^=text]") 選取擁有name屬性以text開始的input元素

5、[attribute$=value]

範例:$("input[name$=text]")選取擁有name屬性以text結束的input元素

6、[attribute*=value]

範例:$("input[name*=text]") 選取擁有name屬性含有text的input元素

7、[attribute~=value]

範例:$("input[class~=text]") 選取擁有class屬性以空格分割的值中含有text的input元素

8、[attribute1][attribute2][attributeN]

描述:合併多個屬性過濾選擇器

5>表單物件屬性過濾選擇器(返回元素集合)

1、:enabled

描述:選取所有可用元素

2、:disabled

說明:選取所有不可用元素

3、:checked

描述:選取所有被選取的元素(單選框,複選框)

範例:$("input: checked") 選取所有被選取的元素

4、:selected

描述:選取所有已選取的選項元素(下拉清單)

#範例: $("select option:selected") 選取所有被選取的選項元素

#四、表單選擇器(傳回元素集合,使用相似)

# 1、:text

描述:選擇所有的單行文字方塊

範例:$(":text")選取所有的單行文字方塊

2、:password

描述:選擇所有的密碼框

#3、:button

描述:選擇所有的按鈕

4、:checkbox

描述:選擇所有的多選框

相關影片教學推薦:jQuery影片教學

以上是jquery選擇器的幾種類型是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn