Jquery选择器(二)--Hierarchy

最新推荐文章于 2025-07-06 01:27:51 发布

原创最新推荐文章于 2025-07-06 01:27:51 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #ViewUI

jQuery 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了CSS中的层级选择器，包括祖先后代选择器、父级子元素选择器、相邻兄弟选择器及一般兄弟选择器，并提供了具体的使用示例。

层级选择器

[1] ancestor descendant      Returns: Array<Element(s)>
      说明：返回"descendant"匹配的且为"ancestor "匹配元素的所有子孙元素。

Js代码

$("form input").css("border", "2px dotted blue");

$("form input").css("border", "2px dotted blue");

       ancestor： Selector--一个有效的选择器。
       descendant： Selector--一个有效的选择器且匹配的元素为第一个选择器匹配元素的子孙元素。

[2] parent > child       Returns: Array<Element(s)>
      说明：返回"child"匹配的且为"parent"匹配元素的所有子元素。

Js代码

$("#main > *").css("border", "3px double red");

$("#main > *").css("border", "3px double red");

       parent： Selector--一个有效的选择器。
       child： Selector--一个有效的选择器且匹配的元素为第一个选择器匹配元素的子元素。

[3] prev + next       Returns: Array<Element(s)>
      说明：返回"next"匹配的且紧跟"prev"匹配元素之后的一个元素的元素集合。

Js代码

$("label + input").css("color", "blue").val("Labeled!")

$("label + input").css("color", "blue").val("Labeled!")

       prev： Selector--一个有效的选择器。
       next： Selector--一个有效的选择器且匹配的元素为第一个选择器匹配元素的下一个紧邻元素。

[4] prev ~ siblings      Returns: Array<Element(s)>
      说明：返回紧随"prev"匹配元素之后的所有与"siblings"匹配的兄弟元素。

Js代码

$("#prev ~ div").css("border", "3px groove blue");

$("#prev ~ div").css("border", "3px groove blue");

prev： Selector--一个有效的选择器。
siblings： Selector--一个有效的选择器且匹配的元素为第一个选择器匹配元素的兄弟元素。