菜鸟教程
教程 jquery tutorial

层级选择器

jQuery 层级选择器允许根据元素的层级关系，精准选中页面中的目标元素，适用于复杂的 DOM 结构操作。

常见层级选择器

  • 后代选择器（空格）
    选中某元素内所有符合条件的后代元素。
js 
  $("div p");
  • 子元素选择器（>） 选中某元素的直接子元素。
js 
  $("ul > li");
  • 相邻兄弟选择器（+） 选中紧跟在某元素后的同级元素。
js 
  $("h2 + p");
  • 通用兄弟选择器（~） 选中某元素后所有同级的指定元素。
js 
  $("h2 ~ p");

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 设置所有div中的p元素颜色为蓝色
    $("div p").css("color", "blue");
    // 设置ul下的直接li子元素背景色为浅灰
    $("ul > li").css("background-color", "#eee");
    // 设置h2后紧邻的p元素字体加粗
    $("h2 + p").css("font-weight", "bold");
    // 设置h2后所有兄弟p元素斜体
    $("h2 ~ p").css("font-style", "italic");
  });
</script>

<div>
<p>这是div内的段落。</p>
</div>


<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>


<h2>标题</h2>
<p>紧邻h2的段落。</p>
<p>h2之后的另一个段落。</p>

相关内容