jQuery 层次选择器的介绍

什么是 jQuery 层次选择器

jQuery 层次选择器是一种基于 HTML 元素的关系进行选择的选择器，主要包括子元素选择器、后代元素选择器、相邻兄弟元素选择器和通用兄弟元素选择器。

子元素选择器

子元素选择器（child selector）选取所有指定元素的直接子元素（即子元素的第一代）。

// 选取 ul 元素下的所有 li 元素
$("ul > li")

后代元素选择器

后代元素选择器（descendant selector）选取某元素的后代元素（不限子元素的层数）。

// 选取 class 为 container 元素下所有的 a 标签
$(".container a")

相邻兄弟元素选择器

相邻兄弟元素选择器（adjacent sibling selector）选取紧随在指定元素后面的一个元素。

// 选取 class 为 box 的元素紧随在 id 为 header 的元素后面的所有 input 元素
$("#header + .box input")

通用兄弟元素选择器

通用兄弟元素选择器（general sibling selector）选取指定元素之后的所有元素。

// 选取 class 为 box 的元素紧随在 id 为 header 的元素后面的所有 input 和 label 元素
$("#header ~ .box input,label")

在实际编程中，注意层次选择器过于深入会导致选择器效率降低以及出现多层嵌套难以维护的情况。

以上是 jQuery 层次选择器的介绍，相信大家通过两个示例已经对其有了更好的理解。