jQuery选择器详解：层叠与过滤策略

"本文主要介绍了jQuery中的选择器机制，包括基本选择器、层叠选择器、过滤选择器等，帮助理解如何高效地选取DOM元素。" 在jQuery中，选择器是用于查找DOM树中特定元素的关键工具，它们使得操作DOM变得简单而高效。下面将详细解析jQuery中的各种选择器。 ### 基本选择器 基本选择器是最基础的元素选取方式，包括： 1. `$("#myElement")` - 通过ID选取元素，ID必须是唯一的，因此返回的结果通常只有一个元素。 2. `$("div")` - 选取所有`<div>`元素，返回一个包含所有匹配元素的数组。 3. `$(".myClass")` - 选取具有指定CSS类的所有元素。 4. `*$("*")` - 选取所有文档中的元素，可与其他选择器组合使用，如`$("#myElement, div, .myclass")`。 ### 层叠选择器 层叠选择器允许更精确地定位元素： 1. `$("form input")` - 选取`<form>`元素内的所有`<input>`元素。 2. `$("#main > *")` - 选取ID为`main`的元素的所有直接子元素。 3. `$("label + input")` - 选取每个`<label>`元素之后紧跟着的`<input>`元素。 4. `$("#prev ~ div")` - 使用同胞选择器，选取ID为`prev`的元素在同一父元素下的所有`<div>`元素。 ### 过滤选择器 过滤选择器用于进一步缩小选取的元素范围： 1. `$("tr:first")` - 选取所有`<tr>`元素中的第一个。 2. `$("tr:last")` - 选取所有`<tr>`元素中的最后一个。 3. `$("tr:even")` - 选取所有偶数索引的`<tr>`元素（从0开始）。 4. `$("tr:odd")` - 选取所有奇数索引的`<tr>`元素。 5. `$("td:eq(2)")` - 选取所有`<td>`元素中索引为2的那个。 6. `$("td:gt(4)")` - 选取`<td>`元素中索引大于4的所有元素。 7. `$("td:lt(4)")` - 选取`<td>`元素中索引小于4的所有元素。 ### 内容过滤选择器 内容过滤选择器基于元素内容来选取元素： 1. `$("div:contains('John')")` - 选取所有包含文本"John"的`<div>`元素。 2. `$("td:empty")` - 选取所有空（不包含任何文本节点）的`<td>`元素。 3. `$("div:has(p)")` - 选取所有包含`<p>`标签的`<div>`元素。 4. `$("div:hidden")` - 选取所有隐藏的`<div>`元素。 5. `$("div:visible")` - 选取所有可见的`<div>`元素。 ### 属性过滤选择器 属性过滤选择器根据元素的属性来选取元素： 1. `$("div[id]")` - 选取所有具有`id`属性的`<div>`元素。 2. `$("input[name='name']")` - 选取所有`name`属性等于`'name'`的`<input>`元素。 这些选择器是jQuery强大功能的基础，通过它们的组合使用，开发者可以轻松地选取需要操作的DOM元素，实现丰富的交互效果和动态更新。理解并熟练掌握这些选择器对于优化jQuery代码和提高网页性能至关重要。