jquery選擇器類型有那些

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

本教學作業系統：Windows10系統、jQuery3.6.0版本、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的

標籤的元素集合

二、層次選擇器

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

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)") 選取含有

元素的

元素（< ;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選擇器類型有那些的詳細內容。更多資訊請關注PHP中文網其他相關文章！