JQuery 层次选择器

心已赠人 2024-02-17 18:09 10阅读 0赞

在[DOM][]元素之间的层次关系主要包含元素的**后代元素**、**子元素**、**相邻元素**和**兄弟元素**等

HTML的结构:

1.（ancestor descendant）在给定的祖先元素下匹配所有的后代元素;比如说子元素还有孙子辈的元素等

$("form input").css("border","1px solid red");

![Center][]

2.子元素选择器（parent > child）

$("form > div").css("border","1px solid red");

![Center 1][]

Firefox firebug下的HTML变化：

![Center 2][]

3.相邻元素选择器（prev + next）

$("fieldset + div").css("border","1px solid red");

![Center 3][]

（prev + next）可以用next()来替换  
next(\[expr\])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

$("fieldset").next("div").css("border","1px solid red");

4.兄弟选择器（prev ~ siblings） 选取prev元素之后的所有siblings兄弟元素。

$("div ~ div").css("border","1px solid red");

![Center 4][]

（prev ~ siblings）可以用nextAll(\[expr\])替换  
nextAll(\[expr\])查找当前元素之后所有的同辈元素。

$("div").nextAll().css("border","1px solid red");

[DOM]: http://www.w3.org/DOM/
[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/de5abf23f09244c7b15b95a4c6736fb2.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8a0990042a1d48eeb70f3b287449f807.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/01b6e2fa732c400b8d6bccb6a493255e.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/abebbfff6839442eaa2d72a5e16d909a.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/72c416d48b8b43dbbd5c32c0d1824f1c.png