简单讲解jQuery中的子元素过滤选择器

领略jQuery中子元素过滤选择器的独特魅力：获取并操作父元素子代的方法

在jQuery中，子元素过滤选择器是一种强大的工具，它允许我们基于父元素和子元素之间的关系来精确地选择元素。这对于操作文档对象模型（DOM）时尤其有用。

一、子元素过滤选择器的使用

子元素过滤选择器允许我们获取每个父元素中的特定子元素。例如：

1. 获取每个父元素的第一个子元素： `'li:first-child'`

2. 获取每个父元素的最后一个子元素： `'li:last-child'`

3. 获取每个父元素中唯一的子元素： `'li:only-child'`

4. 获取每个父元素的奇数位置的子元素： `'li:nth-child(odd)'`

5. 获取每个父元素的偶数位置的子元素： `'li:nth-child(even)'`

6. 获取每个父元素的第三个子元素： `'li:nth-child(3)'`

二、选择器的工作原理和比较

使用`:first`过滤选择器，我们只能获取指定父元素中的首个子元素，而且返回的是一个元素，而非集合。而`:first-child`子元素过滤选择器则可以获取每个父元素中的首个子元素，返回的是一组元素，这使得它更适用于处理多个集合数据。

举例来说，如果我们想改变页面中每个`

`中的第一个`
• `的文字颜色，我们可以使用`:first-child`选择器。在这种情况下，它会选取两个`
  `父元素中的第一个`
  • `元素，并允许我们通过`css()`方法改变它们的文字颜色。

    三、示例演示

    HTML结构如下：

    ```html

    该页面中“蔬菜水果”列表中第一行的文字颜色

    • 芹菜
    • 茄子
    • 萝卜
    • 大白菜
    • 西红柿

    • 橘子
    • 香蕉
    • 葡萄
    • 苹果
    • 西瓜

    ```

    通过jQuery代码：

    ```javascript

    $("li:first-child").css("color", "red");

    ```

    我们可以在浏览器中看到，两个`

    `父元素中的第一个`
    • `元素的文字颜色被成功改变为红色。这正是子元素过滤选择器的魅力所在，它让我们能够轻松获取并操作父元素中的特定子元素。