jQuery层次选择器选择元素使用介绍

当我们想要基于元素的层次结构来选择特定的HTML元素时，我们可以使用jQuery层次选择器。

jQuery层次选择器包括下列几种：

• 后代选择器（Descendant Selector）
• 子元素选择器（Child Selector）
• 相邻兄弟选择器（Adjacent Sibling Selector）
• 通用兄弟选择器（General Sibling Selector）

后代选择器

后代选择器通过选择祖先元素下的某个元素来选择元素。这是最常用的层次选择器。使用空格来分隔祖先元素和后代元素。

例如：

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

如果想选择ul下的li元素，可以使用后代选择器：

$('ul li')

这会选中两个li元素。

子元素选择器

子元素选择器只会选择作为某个元素子元素（直接子元素）的元素。使用>符号来表示子元素选择器。

例如：

<div>
  <ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
  </ul>
  <ol>
    <li>列表项目1</li>
    <li>列表项目2</li>
  </ol>
</div>

如果想选择div下的子元素ul，可以使用子元素选择器：

$('div > ul')

这会选中一个ul元素。

相邻兄弟选择器

相邻兄弟选择器选择紧接在指定元素后面的元素。使用加号+表示相邻兄弟选择器。

例如：

<div>
  <p>段落1</p>
  <p>段落2</p>
  <ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
  </ul>
</div>

如果想选择p元素后面的ul元素，可以使用相邻兄弟选择器：

$('p + ul')

这会选中一个ul元素。

通用兄弟选择器

通用兄弟选择器选择指定元素之后（不一定是相邻的）的所有兄弟元素。使用波浪线~表示通用兄弟选择器。

例如：

<div>
  <p>段落1</p>
  <p>段落2</p>
  <ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
  </ul>
  <h3>标题</h3>
  <ul>
    <li>列表项目3</li>
    <li>列表项目4</li>
  </ul>
</div>

如果想选择第一个ul元素后面的所有ul元素，可以使用通用兄弟选择器：

$('ul:first ~ ul')

这会选中包含两个li元素的ul元素。

参考资料：jQuery层次选择器选择元素中文网