jQuery之層級選擇器學習筆記

2021-06-27 17:59:52 字數 1392 閱讀 5571

層級選擇器:

總共有4

種:子元素選擇器、後代元素選擇器、緊鄰同輩元素選擇器、相鄰同輩元素選擇器。

1】子元素選擇器:用於在給定父元素下查詢父元素下的子元素。

語法:$(

「parent>child

」)//parent為任意有效的選擇器;

child

也是乙個選擇器,且是

parent

的子元素。

eg:

匹配form

下所有的

input

標籤: $(「

form>input

」)//找到的只是

form

下的。結果是

」title

」/>

2】後代元素選擇器:用於在給定的祖先元素下匹配所有的後代元素

語法:$(

「ancestor descendant

」)//ancestor 為任意有效的選擇器;

descendant

也是乙個選擇器,可能是

ancestor 

的子元素、孫元素、重孫元素。

eg:

匹配form

後代標籤中的

input

標籤: $(「

form  input」)

結果: 」

news1

」type=

」text

」value=

」text1

」/> 」

news2

」type=

」text

」value=

」text1

」/>

3】緊鄰同輩元素選擇器:用於匹配所有緊接在

prev

元素後的

next元素

語法:$(

「prev+next

」)//prev為任意有效的選擇器

,next

為緊接著

prev

選擇器的乙個選擇器

eg:

匹配div

後邊的span

元素: $(「

div+span」)

結果:span1

4】相鄰同輩元素選擇器:用於選擇某元素後邊的所有

同輩元素

語法:$(

「prev~siblings」)

eg:

」text

」/> 」

text

」/>

段落標記

用jquery

改變input

元素和p

元素的樣式

$(document).ready(function())

綜合例子:

效果圖:

jQuery選擇器之層級選擇器

文件中的所有的節點之間都是有這樣或者那樣的關係。我們可以把節點之間的關係可以用傳統的家族關係來描述,可以把文件樹當作乙個家譜,那麼節點與節點直接就會存在父子,兄弟,祖孫的關係了。選擇器中的層級選擇器就是用來處理這種關係 子元素 後代元素 兄弟元素 相鄰元素 通過乙個列表,對比層級選擇器的區別 仔細觀...

jQuery選擇器之層級選擇器

若要通過dom 元素之間的層次關係來獲取元素,如後代元素,子元素,相鄰元素和同輩元素,使用jquery的層次選擇器將會是最佳選擇。jquery層次選擇器和css的層次選擇器相同,他們都是根據獲取元素與其父元素,子元素,兄弟元素等的關係而構成的選擇器。jquery中有四種層次選擇器 後代選擇器 子選擇...

jquery選擇器之層級過濾選擇器

ancestor descendant 選取parent元素後所有的child元素 parent child 選取parent元素後所有的直屬child元素,何謂 直屬 也就是第一級的意思了 prev next prev和next是兩個同級別的元素.選中在prev元素後面的next元素 prev s...