jQuery的层次选择器

在jQuery中，层级选择器用于选择特定的子元素或后代元素。常用的层级选择器包括以下几种：

子选择器（Child Selector）>：选择指定父元素的直接子元素。
后代选择器（Descendant Selector）（空格）：选择指定父元素的所有后代元素（不仅限于子元素）。
相邻兄弟选择器（Adjacent Sibling Selector）+：选择紧随另一个元素之后的元素，且两者有相同父元素。
一般兄弟选择器（General Sibling Selector）~：选择同一父元素下的所有某个元素之后的兄弟元素。

以下是这些层级选择器的实例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery层级选择器示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="grandchild">
    <span>孙元素1</span>
    <span>孙元素2</span>
  </div>
  <div class="child">子元素3</div>
  <div class="sibling">兄弟元素1</div>
  <div class="adjoining-sibling">紧跟兄弟元素1</div>
  <div class="general-sibling">一般兄弟元素1</div>
</div>
 
<script>
$(document).ready(function() {
  // 子选择器
  $(".child > span").css("color", "red"); // 选中.child的直接子元素span
 
  // 后代选择器
  $("#parent .grandchild").css("font-weight", "bold"); // 选中#parent的所有后代元素.grandchild
 
  // 相邻兄弟选择器
  $(".sibling + .adjoining-sibling").css("text-decoration", "underline"); // 选中.sibling紧跟的.adjoining-sibling元素
 
  // 一般兄弟选择器
  $(".adjoining-sibling ~ .general-sibling").css("text-transform", "uppercase"); // 选中.adjoining-sibling后的所有.general-sibling元素
});
</script>
 
</body>
</html>

在这个例子中，我们选择了特定的子元素、后代元素、紧跟的兄弟元素和一般的兄弟元素，并对它们应用了不同的CSS样式。

jQuery的层次选择器

评论已关闭

推荐阅读