jQuery基础教程：选择器详解

"jQuery讲义，作者：王玉仙，制作日期：2012-07-15，主要内容包括jQuery的介绍、选择器、DOM操作、事件和动画、Ajax应用以及插件的使用和写法。" jQuery是一种流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。jQuery的核心特性之一就是其强大的选择器，这些选择器使得选取网页中的特定元素变得极其便捷。以下是对描述中提到的基本过滤选择器的详细说明： 1. **`:first`**：这个选择器用于选取集合中的第一个元素。例如，`$("tr:first")`将选取HTML表格中的第一行。 2. **`:last`**：相反，`:last`选择器则选取集合中的最后一个元素。在表格上下文中，`$("tr:last")`会选择表格的最后一行。 3. **`:not(selector)`**：这个选择器用于排除匹配给定选择器的元素。例如，`$("input:not(:checked)")`会找到所有未被选中的输入元素。 4. **`:even`**：此选择器匹配索引值为偶数的元素，从0开始计算。在表格中，`$("tr:even")`将选取第1、3、5等行。 5. **`:odd`**：`:odd`选择器则匹配索引值为奇数的元素。因此，`$("tr:odd")`会选取第2、4、6行等。 6. **`:eq(index)`**：这个选择器选取索引值等于指定index的元素。注意索引是从0开始的，所以`$("tr:eq(1)")`会选择第二行。 7. **`:gt(index)`**：选取索引值大于index的元素。`$("tr:gt(0)")`会选取除第一行外的所有行。 8. **`:lt(index)`**：这个选择器选取索引值小于index的元素。`$("tr:lt(2)")`将选取前两行，即索引为0和1的行。 9. **`:header`**：`:header`选择器用于选取所有的标题元素，如`h1`, `h2`, `h3`等。使用`$(":header").css("background", "#EEE");`可以给页面中的所有标题添加背景色。 10. **`:animated`**：此选择器匹配正在执行动画效果的元素。在动画控制中，`$("div:not(:animated)").animate({ left: "+=20" }, 1000);`只会对没有进行动画效果的`div`元素执行动画。 jQuery的这些选择器极大地提高了开发者的工作效率，使得动态操作DOM和创建复杂的交互效果变得更加容易。此外，jQuery还提供了丰富的API用于DOM操作、事件处理、Ajax交互和动画效果，以及大量的社区开发的插件，进一步增强了其功能性和易用性。