jQuery选择器完全指南

"这篇文章是关于jQuery选择器的全面概述，涵盖了多种类型的选择器，包括ID选择器、类选择器、元素选择器、通配符选择器、组合选择器、属性选择器、伪类选择器以及过滤选择器等，旨在帮助读者理解和掌握jQuery中的各种选择元素的方法。" jQuery选择器是jQuery库中的核心功能之一，它允许开发者高效地选取DOM（文档对象模型）中的特定元素。以下是一些常见的jQuery选择器及其用途： 1. ID选择器：`$("#myElement")` - 通过指定的ID（如`myElement`）选取页面上唯一的一个元素。 2. 元素选择器：`$("div")` - 选取所有`div`元素。 3. 类选择器：`$(".myClass")` - 选取具有`myClass`这个CSS类的所有元素。 4. 通配符选择器：`$("*")` - 选取页面上的所有元素。 5. 组合选择器：`$("#myELement, div, .myclass")` - 选取指定ID的元素、所有`div`元素以及具有`myclass`类的元素。 6. 子元素选择器：`$("form input")` - 选取所有`form`内的`input`元素。 7. 直接子元素选择器：`$("#main > *")` - 选取`id`为`main`元素的所有直接子元素。 8. 相邻兄弟选择器：`$("label + input")` - 选取紧跟在`label`元素后面的`input`元素。 9. 一般兄弟选择器：`$("#prev ~ div")` - 选取与`id`为`prev`的元素有相同父元素且在其之后的所有`div`元素。 10. 首个元素选择器：`$("tr:first")` - 选取第一个`tr`元素。 11. 最后一个元素选择器：`$("tr:last")` - 选取最后一个`tr`元素。 12. 未选中选择器：`$("input:not(:checked) + span")` - 选取未被选中的`input`元素后面的`span`元素。 13. 奇偶选择器：`$("tr:even")` 和 `$("tr:odd")` - 分别选取偶数行和奇数行的`tr`元素。 14. 索引选择器：`$("td:eq(2)")` - 选取索引值为2的`td`元素；`$("td:gt(4)")` - 选取索引大于4的`td`元素；`$("td:lt(4)")` - 选取索引小于4的`td`元素。 15. 内容过滤选择器：`:header` 选取所有的标题元素（如`h1`, `h2`等）；`:animated` 选取当前正在执行动画效果的元素；`:contains('John')` 选取包含文本`John`的元素；`:empty` 选取没有子元素（包括文本节点）的元素；`:has(p)` 选取包含`p`元素的元素；`:parent` 选取有子元素的元素。 16. 显示/隐藏状态选择器：`:hidden` 选取所有隐藏的元素；`:visible` 选取所有显示的元素。 17. 属性选择器：`$("div[id]")` 选取所有有`id`属性的`div`元素；`$("input[name='newsletter']")` 选取`name`属性等于`newsletter`的`input`元素；`$("input[name!='newsletter']")` 选取`name`属性不等于`newsletter`的`input`元素；`$("input[name^='news']")` 选取`name`属性以`news`开头的`input`元素；`$("input[name$='news']")` 选取`name`属性以`news`结尾的`input`元素；`$("input[name*='man']")` 选取`name`属性包含`man`的`input`元素。 这些选择器使得jQuery在DOM操作中极其灵活，能够轻松定位和操作页面上的特定元素，大大简化了JavaScript代码。熟悉和掌握这些选择器对于任何jQuery开发者来说都是至关重要的。