jQuery选择器详解与示例

"jQuery选择" jQuery选择器是jQuery库的核心特性之一，它允许开发者高效地选取DOM元素，进而进行操作和事件绑定。jQuery的选择器在很大程度上借鉴了CSS选择器，但又进行了扩展，使得在JavaScript中操作DOM变得更加简单和直观。 1. 基本选择器 - `$:first`: 这个选择器会选取匹配元素的第一个实例。例如，`$("li:first")` 会选择HTML文档中的第一个`<li>`元素。 - `$:last`: 类似于`$:first`，但选择的是最后一个元素。`$("li:last")` 会选择文档中最后一个`<li>`元素。 - `$:first-child`: 这个选择器选择其父元素下的第一个子元素。`$("li:first-child")` 会选择每个`<ul>`列表中的第一个`<li>`元素。 - `$:last-child`: 与`:first-child`相反，选择父元素下的最后一个子元素。 - `$:only-child`: 如果一个元素是其父元素的唯一子元素，这个选择器将选中它。 2. 序列选择器 - `:nth-child(n)`: 选择索引值为n的子元素，从1开始计数。例如，`$("li:nth-child(2)")` 会选择每个`<ul>`列表中的第二个`<li>`元素。 - `:nth-child(even|odd)`: 分别选择偶数和奇数索引的子元素。`:nth-child(even)` 选择所有偶数位置的子元素，`:nth-child(odd)` 选择所有奇数位置的子元素。 - `:nth-child(An+B)`: 使用公式An+B来选择元素，A和B是整数，n从0开始。例如，`:nth-child(3n+1)` 会选择每3个元素中的第1个。 3. 属性选择器 - `[attribute]`: 选取具有指定属性的元素，如`$("a[rel='external']")` 会选择所有`rel`属性值为'external'的`<a>`元素。 - `[attribute=value]`: 选取属性值等于指定值的元素，如`$("input[type='checkbox']")` 会选择所有type属性为'checkbox'的`<input>`元素。 - `[attribute^=value]`: 选取属性值以指定字符串开头的元素。 - `[attribute$=value]`: 选取属性值以指定字符串结尾的元素。 - `[attribute*=value]`: 选取属性值包含指定字符串的元素。 4. CSS类选择器 - `.class`: 选取具有指定CSS类的元素，如`$(".highlight")` 会选择所有class包含'highlight'的元素。 - `#id`: 通过ID选取特定元素，如`$("#myDiv")` 会选择ID为'myDiv'的元素。 - `element#id.class`: 可以结合元素标签、ID和类选择器一起使用，如`$("p#para1.highlight")` 会选择id为'para1'且class包含'highlight'的所有`<p>`元素。 - `element.class1.class2`: 同时选择具有多个类的元素，如`$("div.error.warning")` 会选择同时具有'error'和'warning'类的所有`<div>`元素。 5. 其他选择器 - `*: all`: 选择所有元素，如`$("*")` 会选择文档中的每一个元素。 - `:gt(index)`: 选取索引值大于给定值的元素，从0开始计数。 - `:lt(index)`: 选取索引值小于给定值的元素，同样从0开始计数。 jQuery选择器极大地简化了DOM元素的选取过程，使开发者能够更加专注地编写交互逻辑和页面动态效果，而不是纠结于如何找到正确的元素。熟练掌握jQuery选择器，能大幅提升开发效率和代码质量。