JQuery選擇器彙總 搬運)

2021-09-28 17:01:12 字數 3184 閱讀 4634

使用jquery的時候經常會忘記選擇器的語法,在此做乙個彙總,加深記憶。

基本常用的選擇器:

$("#element") 選擇id值等於element的元素,id值不能重複在文件中只能有乙個id值是element所以得到的是唯一的元素

$(「div」) 選擇所有的div標籤元素,返回div元素陣列

$(".class") 選擇使用class類的css的所有元素

( "∗

")選擇

文件中的

所有的元

素,可以

運用多種

的選擇方

式進行聯

合選擇:

例如

("*") 選擇文件中的所有的元素,可以運用多種的選擇方式進行聯合選擇:例如

("∗")選

擇文件中

的所有的

元素,可

以運用多

種的選擇

方式進行

聯合選擇

:例如("#element,div,.class")

屬性過濾選擇器:

$(「div[id]」) 選擇所有含有id屬性的div元素

$(「input[name=『newsletter』]」) 選擇所有的name屬性等於』newsletter』的input元素

$(「input[name!=『newsletter』]」) 選擇所有的name屬性不等於』newsletter』的input元素

$(「input[name^=『news』]」) 選擇所有的name屬性以』news』開頭的input元素

( "i

nput

[nam

e("input[name

("inpu

t[na

me=『news』]") 選擇所有的name屬性以』news』結尾的input元素

$(「input[name*=『man』]」) 選擇所有的name屬性包含』news』的input元素

( "i

nput

[id]

[nam

e("input[id][name

("inpu

t[id

][na

me=『man』]") 可以使用多個屬性進行聯合選擇,該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素

層疊選擇器:

$(「form input」) 選擇所有的form元素中的input元素

$("#main > *") 選擇id值為main的所有的子元素

$(「label + input」) 選擇所有的label元素的下乙個input元素節點,經測試選擇器返回的是label標籤後面直接跟乙個input標籤的所有input標籤元素

$("#prev ~ div") 同胞選擇器,該選擇器返回的為id為prev的標籤元素的所有的屬於同乙個父元素的div標籤

基本過濾選擇器:

$(「tr:first」) 選擇所有tr元素的第乙個

$(「tr:last」) 選擇所有tr元素的最後乙個

$(「input:not(:checked) + span」) 過濾掉:checked的選擇器的所有的input元素

$(「tr:even」) 選擇所有的tr元素的第0,2,4… …個元素(注意:因為所選擇的多個元素時為陣列,所以序號是從0開始)

$(「tr:odd」) 選擇所有的tr元素的第1,3,5… …個元素

$(「td:eq(2)」) 選擇所有的td元素中序號為2的那個td元素

$(「td:gt(4)」) 選擇td元素中序號大於4的所有td元素

$(「td:ll(4)」) 選擇td元素中序號小於4的所有的td元素

內容過濾選擇器:

$(「div:contains(『john』)」) 選擇所有div中含有john文字的元素

$(「td:empty」) 選擇所有的為空(也不包括文字節點)的td元素的陣列

$(「div:has§」) 選擇所有含有p標籤的div元素

$(「td:parent」) 選擇所有的以td為父節點的元素陣列

視覺化過濾選擇器:

$(「div:hidden」) 選擇所有的被hidden的div元素

$(「div:visible」) 選擇所有的視覺化的div元素

( "u

lli:

nth−

chil

d(2)

")

,("ul li:nth-child(2)"),

("ulli

:nth

−chi

ld(2

)"),

(「ul li:nth-child(odd)」),$(「ul li:nth-child(3n + 1)」)

$(「div span:first-child」) 返回所有的div元素的第乙個子節點的陣列

$(「div span:last-child」) 返回所有的div元素的最後乙個節點的陣列

$(「div button:only-child」) 返回所有的div中只有唯一乙個子節點的所有子節點的陣列

表單元素選擇器:

$(":input") 選擇所有的表單輸入元素,包括input, textarea, select 和 butto

$(":text") 選擇所有的text input元素

$(":password") 選擇所有的password input元素

$(":radio") 選擇所有的radio input元素

$(":checkbox") 選擇所有的checkbox input元素

$(":submit") 選擇所有的submit input元素

$(":image") 選擇所有的image input元素

$(":reset") 選擇所有的reset input元素

$(":button") 選擇所有的button input元素

$(":file") 選擇所有的file input元素

$(":hidden") 選擇所有型別為hidden的input元素或表單的隱藏域

== 表單元素過濾選擇器:==

$(":enabled") 選擇所有的可操作的表單元素

$(":disabled") 選擇所有的不可操作的表單元素

$(":checked") 選擇所有的被checked的表單元素

$(「select option:selected」) 選擇所有的select 的子元素中被selected的元素

jquery選擇器彙總

div id 選擇所有含有id屬性的div元素 input name keleyicom 選擇所有的name屬性等於 keleyicom 的input元素 input name keleyicom 選擇所有的name屬性不等於 keleyicom 的input元素 input name keleyi...

jQuery 選擇器彙總

jquery裡的選擇器有3種 元素選擇器,id選擇器,類選擇器 div 選擇所有 div 元素 test 選擇所有id為test的元素 myclass 選擇class myclass 的所有元素 以這3種選擇器為基礎,運用不同的語法 可以精準的選取物件 p first 選擇第乙個 p 元素 可以理解...

Jquery選擇器彙總

一.基本選擇器 1.id選擇器 id css background fffff 2.class選擇器,選中class mini的元素 mini css background fffff 3.標籤選擇器,選中div標籤的元素 div css background fffff 4.所有選擇器,選中所有選...