jQuery選擇器總結

2021-06-05 04:29:13 字數 4862 閱讀 4147

父元素中所有的子元素,不包括後代元 $(

父元素》

子元素)

選擇某元素的緊挨著的元素(如果不存在則什麼都不選擇)

$(某元素

+需要查詢的元素)

層次選擇器4

個:選擇父元素中的某些元素

$('父元素 子元素')

選擇選擇兄弟元素(可以間隔其他元素)$(

某元素~

需要查詢的元素)

簡單選擇器10

個:簡單選擇器的特點是有個

":"

:first 選中第乙個

:last  選中最後乙個

:not   表示不選中某個

:eq    表示索引值等於   下標從0開始

:gt(數字

)   

表示索引值大於某個數的

:lt(數字

)   

表示索引值小於某個數的

:even  表示取索引值是偶數的元素

:odd   表示取索引值是奇數的元素

:header選中所有的標題元素

:animated 表示選中正在執行動畫的元素

$("#myelement") 選擇

id值等於

myelement

的元素,

id值不能重複在文件中只能有乙個

id值是

myelement

所以得到的是唯一的元素

$("div") 選擇所有的

div標籤元素,返回

div元素陣列

$(".myclass") 選擇使用

myclass

類的css

的所有元素

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

$("#myelement,div,.myclass")

層疊選擇器:

$("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元素

$(":header")

$("div:animated")

內容過濾選擇器:

$("div:contains('john')") 選擇所有

div中含有

john

文字的元素

$("td:empty") 選擇所有的為空(也不包括文字節點)的

td元素的陣列

$("div:has(p)") 選擇所有含有

p標籤的

div元素

$("td:parent") 選擇所有的以

td為父節點的元素陣列

視覺化過濾選擇器:

$("div:hidden") 選擇所有的被

hidden

的div元素

$("div:visible") 選擇所有的視覺化的

div元素

屬性過濾選擇器:

$("div[id]") 選擇所有含有

id屬性的

div元素

$("input[name='newsletter']") 選擇所有的

name

屬性等於

'newsletter'

的input元素

$("input[name!='newsletter']") 選擇所有的

name

屬性不等於

'newsletter'

的input元素

$("input[name^='news']") 選擇所有的

name

屬性以'news'

開頭的input元素

$("input[name$='news']") 選擇所有的

name

屬性以'news'

結尾的input元素

$("input[name*='man']") 選擇所有的

name

屬性包含

'news'

的input元素

$("input[id][name$='man']") 可以使用多個屬性進行聯合選擇,該選擇器是得到所有的含有

id屬性並且那麼屬性以

man結尾的元素

子元素過濾選擇器:

$("ul li:nth-child(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 

和 button

$(":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

的元素

選取乙個 name 為」

s_03_22″的

input text

框的上乙個td的

text值

$(」input[@ name =s_03_22]

「).parent().prev().text()

名字以」s_」

開始,並且不是以」_r

」結尾的

$(」input[@ name ^='s_']

「).not(

」[@ name $='_r']「)

乙個名為 radio_01

的radio

所選的值

$(」input[@ name =radio_01][@checked]

「).val();

$("a b") 查詢

a元素下面的所有子節點,包括非直接子節點

$("a>b") 查詢

a元素下面的直接子節點

$("a+b") 查詢

a元素後面的兄弟節點,包括非直接子節點

$("a~b") 查詢

a元素後面的兄弟節點,不包括非直接子節點

基本選擇器5

個:id

選擇器(

$('#id')

)、類選擇器

$('.

樣式名稱')

*選擇器 

$('*')

、元素選擇器 

$('標籤名稱')

組選擇器 $('#id,.class,

標籤名稱')

Jquery選擇器總結

jquery中的選擇器通用的格式為 selector 這裡的selector總的來說可以按照幾種類別進行選擇 1 按照元素的名稱選 這時直接寫元素的名稱即可,此時返回的是所有該名稱元素的集合。如 a 選擇所有的元素,是個集合陣列 p 選擇所有的元素 2 按照元素的id屬性選擇 這時selector的...

jQuery選擇器總結

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...

jQuery選擇器總結

所有元素 this 當前元素 test id為test的所有元素 test 類名為test的所有元素 div 標籤為div的所有元素 test first class為test的第乙個元素,test可以換成任意選擇器得到的節點 以下都是 的形式,用法同上 last 最後乙個元素 not 例 inpu...