jquery自學系列三 選擇器(下)

2021-06-05 19:57:56 字數 3789 閱讀 7658

二)層次選擇器jquery層次選擇器

選擇器描述返回

示例$("ancestor  descendant")

選取ancestor元素裡所有的descendant(後代)元素

集合元素

$("div span")選取裡的所有元素

$("parent>child")

選取parent元素下的子元素child

集合元素

$("div > span")選取下直接子元素

$("prev+next")

選取緊接在prev元素後的next元素

集合元素

$(".one+div")選取class為one的下一

個元素等同於$(".one").next("div")

$("prev~siblings")

選取prev元素之後的所有siblings元素

集合元素

$("#two ~ div")選取id為two的元素後面

的所有兄弟元素

等同於$("#two").nextall("div")

三)jquery過濾選擇器:基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾,表單物件屬性過濾

基本過濾

選擇器描述返回

示例:first

選取第乙個元素

單個元素

$("div:first")選取所有元素中第乙個元素

:last

選取最後乙個元素

單個元素

$("div:last")選取所有元素中最後乙個元素

:not(seletor)

除去所有與給定選擇器匹配的元素

集合元素

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

:even

選取索引是偶數的所有元素,索引從0開始

集合元素

$("input:even")選取索引是偶數的元素

:odd

選取索引是奇數的所有元素,索引從0開始

集合元素

$("input:odd")選取索引是奇數的元素

:eq(index)

選取索引等於index的元素,索引從0開始

單個元素

$("input:eq(1)")選取索引是1的元素

:gt(index)

選取索引大於index的元素,索引從0開始

集合元素

$("input:gt(1)")選取索引大於1的元素,不包括1

:lt(index)

選取索引小於index的元素,索引從0開始

集合元素

$("input:lt(1)")選取索引小於1的元素,不包括1

:header

選取所有的標題元素,如h1,h2……

集合元素

$(":header")選取網頁中所有的,,……

:ainmated

選取當前正在執行動畫的所有元素

集合元素

$("div:animated")選取正在執行動畫的元素

內容過濾

選擇器描述返回

示例:contains(text)

選取含有文字內容為「text」的元素

集合元素

$("div:contains('wo')")選取

含有文字『wo』的div元素

:empty

選取不包換子元素或文字的空元素

集合元素

$("div:empty")選取不包換子元素

的空元素

:has(selector)

選取含有選擇器所匹配的元素的元素

集合元素

$("div:has(p)")選取含有元素

的元素:parent

選取含有子元素或者文字的元素

集合元素

$("div:parent")選取游泳子元素

的元素

可見性過濾

選擇器描述返回

示例:hidden

選取所有不可見元素

集合元素

$(":hidden")選取所有不可見的元素,包括,

,等元素。

如果只想選取元素,可以使用$("input:hidden")

:visible

選取所有可見元素

集合元素

$("div:visible")選取所有可見的元素

屬性過濾

選擇器描述返回

示例[attribute]

選取擁有此熟悉的元素

集合元素

$("div[id]")選取擁有屬性id的元素

[attribute=value]

選取屬性的值為value的元素

集合元素

$("div[title=test]")選取屬性title為「test」的元素

[attribute!=value]

選取屬性的值不等於value的元素

集合元素

$("div[title!=test]")選取屬性title不為「test」的

元素,注意:沒有屬性title的元素也會被選取

[attribute^=value]

選取屬性的值以value開始的元素

集合元素

$("div[title^=test]")選取屬性title以「test」開始

的元素[attribute$=value]

選取屬性的值以value結束的元素

集合元素

$("div[title$=test]")選取屬性title以「test」結束

的元素[attribute*=value]

選取屬性的值含有value的元素

集合元素

$("div[title*=value]")選取屬性title含有「test」

的元素[selector1][selector2]

[selectorn]

用屬性選擇器合併成乙個復合屬性

選擇器,滿足多個條件,沒選擇一

次,縮小一次範圍

集合元素

$("div[id][title$='test']")選取擁有屬性id並且屬性

title以「test」結束的元素

子元素過濾

選擇器描述返回

示例:nth-child(index/even/

odd/equation)

選取每個父元素下的第index個子元素

或者奇偶元素(index從1算起)

集合元素

:eq(index)只匹配乙個元素,而:nth-child為每個父元素匹配

子元素並且:nth-child(index)的index是從1開始的,

而:eq(index)是從0開始的

:first-child

選取每個父元素的第乙個子元素

集合元素

:first只返回單個元素,而:first-child選擇符為每個父元素匹配

第乙個子元素。

例如:$("ul li:first-child");選取每個中第乙個

:last-child

選取每個父元素的最後乙個子元素

集合元素

:last只返回單個元素,:last-child為每個父元素匹配最後乙個

子元素例如:$("ul li:last-child");選擇每個中的最後乙個

:only-child

如果某個元素是他父元素中的唯一

子元素,那麼將會被匹配。如果

父元素中含有其他元素,則不會

匹配集合元素

$("ul li:only-child") 在中選取是唯一子元素的元素

jQuery選擇器(三)

子元素過濾選擇器 l nth child 選擇器詳解如下 1 nth child even odd 能選取每個父元素下的索引值為偶 奇 數的元素 2 nth child 2 能選取每個父元素下的索引值為2 的元素 3 nth child 3n 能選取每個父元素下的索引值是3 的倍數的元素 3 nth...

三 jQuery選擇器

1 層次選擇器 4 p div 選取p元素下的所有div p div 選取p元素 下的div子元素 p div 選取p元素的一下個 同胞div元素 等價於 p next div p div 選取p元素後面所有 同胞div元素 等價於 p nextall div 後面的同輩 對比 p siblings...

Jquery選擇器(三)

過濾選擇器 4 屬性過濾器 查詢所有含有 id 屬性的 div 元素 document ready function test1 test2 查詢所有name是qin的input並選中 document ready function 查詢所有name不是qin的input並選中 document r...