jQuery选择器详解：基本、层次、过滤与属性筛选

"这篇内容主要解析了jQuery选择器的分类及其用法，包括基本选择器、层次选择器、简单过滤选择器、内容过滤选择器以及可见性过滤选择器和属性过滤选择器。" jQuery选择器是jQuery库中的核心功能之一，它们提供了强大的选择和定位DOM元素的能力，使得在JavaScript中操作DOM变得简洁高效。 1. **基本选择器** - `#id`: 通过ID来选择页面上唯一的一个元素，例如`$("#myID")`。 - `.class`: 通过类名来选择一组元素，例如`$(".myClass")`。 - `element`: 通过元素名称来选择所有该类型的元素，例如`$("div")`。 - `*`: 选择所有元素，相当于CSS中的通配符。 - `selector1, selector2`: 选择多个选择器匹配到的所有元素，如`$("div, span")`。 2. **层次选择器** - `ancestor descendant`: 选择所有属于祖先元素的后代元素，如`$("div p")`。 - `parent > child`: 选择父元素的直接子元素，如`$("ul > li")`。 - `prev + next`: 选择紧跟在前一个元素后面的同级元素，例如`$("div + p")`，等同于`.next()`方法。 - `prev ~ siblings`: 选择前一个元素后面的所有同级元素，例如`$("div ~ p")`，等同于`.nextAll()`，而`.siblings()`则选择所有同级元素。 3. **简单过滤选择器** - `:first`: 选择集合中的第一个元素，等同于`.first()`，例如`$("div:first")`。 - `:last`: 选择集合中的最后一个元素，等同于`.last()`，例如`$("div:last")`。 - `:not(selector)`: 选择那些不匹配给定选择器的元素，例如`$("div:not(.highlight)")`。 - `:even`: 选择索引值为偶数的元素，从0开始，如`$("tr:even")`。 - `:odd`: 选择索引值为奇数的元素，从0开始，如`$("tr:odd")`。 - `:eq(index)`: 选择指定索引号的元素，例如`$("div:eq(2)")`。 - `:gt(index)`: 选择索引号大于给定值的元素，例如`$("div:gt(1)")`。 - `:lt(index)`: 选择索引号小于给定值的元素，例如`$("div:lt(3)")`。 - `:header`: 选择所有的标题元素，如`$("h1, h2, h3, h4, h5, h6")`。 - `:animated`: 选择正在执行动画的元素，例如`$("div:animated")`。 4. **内容过滤选择器** - `:contains(text)`: 选择包含特定文本的元素，例如`$("p:contains('Hello')")`。 - `:empty`: 选择没有子元素或文本的空元素，例如`$("div:empty")`。 - `:has(selector)`: 选择其后代包含指定选择器匹配的元素，例如`$("div:has(p)")`。 - `:parent`: 选择含有子元素或文本的元素，例如`$("div:parent")`。 5. **可见性过滤选择器** - `:hidden`: 选择不可见的元素，包括隐藏类型、CSS样式`display:none`的元素，例如`$("div:hidden")`。 - `:visible`: 选择所有可见的元素，例如`$("div:visible")`。 6. **属性过滤选择器** - `[attribute]`: 选择具有指定属性的元素，例如`$("[href]")`。 - `[attribute=value]`: 选择属性值等于指定值的元素，例如`$("[rel='external']")`。 - `[attribute!=value]`: 选择属性值不等于指定值的元素，例如`$("[href!='#']")`。 - `[attribute^=value]`: 选择属性值以指定值开头的元素，例如`$("[class^='my']")`。 - `[attribute$=value]`: 选择属性值以指定值结尾的元素，例如`$("[href$='.jpg']")`。 - `[attribute*=value]`: 选择属性值中包含指定值的元素，例如`$("[title*='example']")`。 以上就是jQuery选择器的主要分类和用法，熟练掌握这些选择器可以帮助开发者更加高效地定位和操作DOM元素，实现丰富的交互效果和动态功能。