6 过滤选择器

在前一篇中，我们介绍了 jQuery 的层级选择器，它使我们能够通过 DOM 层级结构进行元素的选择。这一篇，我们将深入探讨 过滤选择器，它允许我们在已选定的元素中进一步筛选出符合特定条件的元素。

过滤选择器概述

过滤选择器 使你可以在已选择的元素集合中，基于特定条件来筛选元素。这对于处理复杂的 DOM 结构非常有用。例如，假设你需要从列表中选择特定的项，可以使用过滤选择器来满足这一需求。

过滤选择器的基本语法

jQuery 的过滤选择器主要包括以下几种形式：

• :first - 选择集合中的第一个元素
• :last - 选择集合中的最后一个元素
• :eq(index) - 选择集合中指定索引的元素（索引从 0 开始）
• :even - 选择所有偶数（0、2、4、…）索引的元素
• :odd - 选择所有奇数（1、3、5、…）索引的元素
• :gt(index) - 选择集合中索引大于指定值的元素
• :lt(index) - 选择集合中索引小于指定值的元素

实际案例演示

让我们通过一个简单的示例来演示如何使用过滤选择器。

HTML 结构

<ul id="myList">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>葡萄</li>
    <li>樱桃</li>
</ul>

使用 jQuery 进行过滤选择

我们将使用 jQuery 来选择列表中的特定项。例如，我们可以选择所有偶数索引的元素：

$(document).ready(function() {
    $('#myList li:even').css('color', 'red'); // 将偶数索引的列表项颜色设置为红色
});

在上述代码中，$('#myList li:even') 选择了列表中所有偶数位置的 li 元素并将它们的文本颜色设置为红色。当你查看页面时，第二个和第四个项（香蕉和葡萄）将被着色。

进一步筛选

我们可以结合其他选择器和过滤器来进一步筛选。例如，选择列表中第一个和最后一个元素：

$(document).ready(function() {
    $('#myList li:first').css('font-weight', 'bold'); // 设置第一个项为粗体
    $('#myList li:last').css('font-style', 'italic'); // 设置最后一个项为斜体
});

在上述代码中，li:first 选择了第一个 li 元素（苹果），并将其设置为粗体。而 li:last 选择了最后一个 li（樱桃），并将其字体样式设置为斜体。

使用复杂选择器

你还可以结合条件进行更复杂的选择。例如，假设我们想选择所有索引大于 1 的元素：

$(document).ready(function() {
    $('#myList li:gt(1)').css('text-decoration', 'underline'); // 将索引大于1（橘子、葡萄、樱桃）的项下划线
});

这段代码会给 li 列表中索引为 2、3 和 4 的元素（橘子、葡萄、樱桃）添加下划线。

总结

通过使用 jQuery 中的 过滤选择器，你可以轻松地在一个集合中筛选出你所需要的元素。这使得我们在处理 DOM 元素时能够进行更复杂和灵活的操作。

在下一篇文章中，我们将讨论 属性选择器，它允许你基于元素的属性进行选择，为你的 jQuery 查询增添更多的可能性。请继续关注！