Jquery選擇器總結

2021-07-25 23:34:49 字數 2628 閱讀 5342

jquery選擇器問題

分類:1.基本選擇器:

id class label

example:$('#p')   匹配

id=p元素

$('.p')    匹配

class=p元素

$('p')     匹配 元素

$('p,.p')  同時匹配

和class=p元素

2.層次選擇器: 後代

子元素相鄰元素

同輩元

example:$('div p')匹配

裡的所有元素

$('div > span') 匹配

元素下的元素

$('.one + div') 匹配

class=one

的下乙個

元素 可用

$('.one').next("div")代替

$('#two~div')  匹配

id=two

元素下所有

元素  可用

$('#two').nextall("div")代替

3.過濾選擇器:

3.1.基本過濾選擇器:

example:$('div:first')    匹配 所有

中第乙個

$('div:last')     匹配 所有

中最後乙個

$('input:not(.p)')匹配 所有

class不是p

的元素$('input:even')   匹配 所有索引為偶數的

$('input:odd')    匹配 所有索引為奇數的

$('input:eq(1)')  匹配 索引等於1的

$('input:gt(1)')  匹配 索引大於1的

$('input:lt(1)')  匹配 索引小於1的

$(':header')      匹配 網頁中所有

,....

$('div:animated') 匹配 正在執行動畫的

$(':focus')       匹配 當前獲取焦點的元素

3.2.內容過濾器:

example:$("div:contains('me')") 匹配 含有文字me的

$('div:empty')          匹配 無子元素的空

$('div:has(p)')         匹配 含有

原色的

$('div:parent') 匹配

含有子元素或者文字的

3.3.可見性過濾器:

example:$(':hidden')      匹配 所有不可見元素

$(':visible')     匹配 所有可見元素

3.4.屬性過濾器:

example:$('div[id]')        匹配 擁有屬性id的

div

$('div[id="test"]') 匹配

id屬性

=test

的div

$('div[id!="test"]')匹配

id屬性

!=test

的div

$('div[id^="test"]')匹配

id屬性以

test

開頭的div

$('div[id$="test"]')匹配

id屬性以

test

結尾的div

$('div[id*="test"]')匹配

id屬性值含有

test

的div

$('div[id|="test"]) 匹配

id屬性等於

test

或者以"test-"

開頭的div

$('div[id~="test"]) 匹配

id屬性以空格分隔的值中含有

test

的元素

$('div[id][title$="test"]')匹配 有

id屬性且

title

屬性以test

結尾的div

3.5.子元素過濾器:

example:$(':nth-child')   匹配 每個父元素下的第

n個元素

$(':first-child') 匹配 每個父元素下的第乙個元素

$(':last-child')  匹配 每個父元素下的最後乙個元素

$(':only-child')  匹配 該元素僅僅是其父元素的唯一子元素

3.6.表單物件屬性過濾器:

example:$(':enabled')  匹配 所有可用元素

$(':disabled') 匹配 所有不可用元素

$(':checked')  匹配 所有被選取的單選複選元素

$(':selected') 匹配 所有被選取的下拉列表選項

4.表單選擇器:

example:$(':input')    匹配 所有

,,,元素

$(':text')     匹配 所有單行文字框

$(':password') 匹配 所有密碼框

$(':radio') $(':checkbox') $(':submit') $(':image') $(':reset') $(':button') $(':file') $(':hidden') 

jQuery選擇器總結

父元素中所有的子元素,不包括後代元 父元素 子元素 選擇某元素的緊挨著的元素 如果不存在則什麼都不選擇 某元素 需要查詢的元素 層次選擇器4 個 選擇父元素中的某些元素 父元素 子元素 選擇選擇兄弟元素 可以間隔其他元素 某元素 需要查詢的元素 簡單選擇器10 個 簡單選擇器的特點是有個 first...

Jquery選擇器總結

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

jQuery選擇器總結

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