JQuery选择器完全指南

"这是一份详细的jQuery中文参考手册，涵盖了jQuery API的核心内容，特别是关于选择器的使用。手册旨在帮助开发者更高效地选取和操作DOM元素，实现丰富的网页交互效果。" jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在jQuery中，选择器是核心功能之一，用于选取DOM中的特定元素，以便进行进一步的操作。 1. **基础选择器**： - `*$("*")*`: 选择页面上的所有元素。 - `#id`: 通过ID选取特定元素，如`$("#lastname")`选取ID为`lastname`的元素。 - `.class`: 通过类名选取元素，如`$(".intro")`选取所有具有`intro`类的元素。 - `element`: 选取特定类型的元素，如`$("p")`选取所有段落元素`<p>`。 2. **组合选择器**： - `.class1.class2`: 选取同时具有两个或更多类的元素，如`$(".intro.demo")`选取同时有`intro`和`demo`类的元素。 - `s1,s2,s3`: 使用逗号分隔选择多个不同的选择器，如`$("th,td,.intro")`选取`<th>`、`<td>`元素以及具有`intro`类的元素。 3. **伪类选择器**： - `:first`: 选取首个元素，如`$("p:first")`选取第一个`<p>`元素。 - `:last`: 选取最后一个元素，如`$("p:last")`选取最后一个`<p>`元素。 - `:even`: 选取索引为偶数的元素，如`$("tr:even")`选取所有偶数行的`<tr>`元素。 - `:odd`: 选取索引为奇数的元素，如`$("tr:odd")`选取所有奇数行的`<tr>`元素。 - `:eq(index)`: 选取指定索引位置的元素，如`$("ul li:eq(3)")`选取列表中的第四个元素（索引从0开始）。 - `:gt(no)`: 选取索引大于指定数的元素，如`$("ul li:gt(3)")`选取索引大于3的`<li>`元素。 - `:lt(no)`: 选取索引小于指定数的元素，如`$("ul li:lt(3)")`选取索引小于3的`<li>`元素。 4. **其他选择器**： - `:not(selector)`: 选取不匹配给定选择器的元素，如`$("input:not(:empty)")`选取所有非空的`<input>`元素。 - `:header`: 选取所有的标题元素，如`$:header)`选取所有`<h1>`到`<h6>`元素。 - `:animated`: 选取正在执行动画的元素。 - `:contains(text)`: 选取包含特定文本的元素，如`$(":contains('W3School')")`选取包含“W3School”文本的元素。 - `:empty`: 选取没有子元素（包括文本节点）的元素，如`$(":empty")`选取所有空元素。 - `:hidden`: 选取所有隐藏的元素，如`$("p:hidden")`选取所有隐藏的`<p>`元素。 - `:visible`: 选取所有可见的元素，如`$("table:visible")`选取所有可见的表格。 5. **属性选择器**： - `[attribute]`: 选取具有指定属性的元素，如`$("[href]")`选取所有具有`href`属性的元素。 - `[attribute=value]`: 选取属性值等于指定值的元素，如`$("[href='#']")`选取`href`属性值为`#`的元素。 - `[attribute!=value]`: 选取属性值不等于指定值的元素，如`$("[href!='#']")`选取`href`属性值不等于`#`的元素。 - `[attribute$=value]`: 选取属性值以指定值结尾的元素，如`$("[href$='.jpg']")`选取`href`属性值以`.jpg`结尾的元素。 - `[attribute^=value]`: 选取属性值以指定值开头的元素。 - `[attribute*=value]`: 选取属性值包含指定值的元素。 通过这些选择器，开发者可以非常精确地定位页面上的元素，进而进行样式修改、事件绑定、内容操作等各种DOM操作。jQuery还提供了丰富的API来方便对选取的元素进行进一步的处理，如CSS操作、DOM遍历、事件处理、动画效果等，大大提高了JavaScript开发的效率和代码的可读性。这份中文参考手册对于学习和使用jQuery来说，是一份非常实用的工具。