jQuery层次选择器详解：后代、子元素、相邻与同辈选择

"jQuery层次选择器是用于选取DOM元素之间具有特定层次关系的工具，包括祖先后代选择、子元素选择、相邻元素选择以及兄弟元素选择。这些选择器在jQuery中非常常用，能帮助开发者精确地定位到页面上的目标元素进行操作。以下是关于这四种层次选择器的详细说明： 1. **祖先后代选择器 (ancestor descendant)** - 用法：`$("ancestor descendant")` - 描述：这个选择器返回给定祖先元素下的所有后代元素。例如，`$("form input")`将选取所有在`form`元素内的`input`元素，包括间接的后代。它与`parent > child`选择器不同，后者只选取直接的子元素。 2. **子元素选择器 (parent > child)** - 用法：`$("parent > child")` - 描述：这个选择器返回给定父元素的所有直接子元素。例如，`$("form > input")`选取`form`元素下的直接子`input`元素。注意，它不包括非直接子元素。 3. **相邻元素选择器 (prev + next)** - 用法：`$("prev + next")` - 描述：此选择器匹配紧跟在`prev`元素后的第一个`next`元素。例如，`$("label + input")`选取紧接在`label`元素后的`input`元素。它只选取一个元素，且必须是紧邻的。 4. **兄弟元素选择器 (prev ~ siblings)** - 用法：`$("prev ~ siblings")` - 描述：这个选择器匹配`prev`元素之后的所有同级（兄弟）`siblings`元素。例如，`$("form ~ input")`选取所有位于`form`元素后面的`input`元素，但不包括`form`自身。`siblings()`方法与之不同，它不考虑元素前后位置，只要它们是同级节点即可选取。 在使用这些选择器时，有几点需要注意： - `$("#one + div")`只选取id为`one`的元素后面紧邻的`div`元素。 - `$("#two ~ div")`则选取id为`two`的元素后面所有的`div`兄弟元素。 - `$("div:first")`和`$("div:eq(0)")`都选取第一个`div`元素，但通常前者更常见。 - `:empty`选择器用于选取没有子节点的元素，而`:parent`则是选取有子节点的元素。 - 选择子元素时，需在父元素和子元素间使用空格，如`$("parent child")`。 - `select`标签内的`option`元素被视为`select`的子元素。 - 当设置一组`radio`的`val`值时，应使用JavaScript数组来赋值，因为它们可能是一组。 理解并熟练运用这些选择器，将大大提升jQuery代码的效率和精准度。"