jQuery基本过滤选择器用法示例

下面是关于“jQuery基本过滤选择器用法示例”的完整攻略，包括用法说明和两个示例说明：

什么是jQuery选择器？

选择器是一种用于选择HTML元素的机制，它是jQuery的重要部分。jQuery支持的选择器种类多种多样，包括基本选择器、层次选择器、属性选择器、筛选选择器、表单选择器和表单对象过滤选择器等。其中，本文主要介绍的是jQuery基本过滤选择器的用法和示例。

jQuery基本过滤选择器的用法

jQuery基本过滤选择器用于在选定的元素中按照某些规则过滤出匹配的元素，常用的有：:first、:last、:even、:odd、:eq(n)、:gt(n)和:lt(n)。

:first：选中满足条件的第一个元素；
:last：选中满足条件的最后一个元素；
:even：选中满足条件的所有偶数索引元素，第一个元素索引为0；
:odd：选中满足条件的所有奇数索引元素，第一个元素索引为0；
:eq(n)：选中满足条件的第n个元素；
:gt(n)：选中满足条件的索引大于n的元素；
:lt(n)：选中满足条件的索引小于n的元素。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery基本过滤选择器示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function(){
            // :first 和 :last 过滤选择器示例
            $("p:first").css("background-color", "yellow");
            $("p:last").css("background-color", "green");

            // :even 和 :odd 过滤选择器示例
            $("li:even").css("background-color", "lightgray");
            $("li:odd").css("background-color", "white");

            // :eq(n)、:gt(n) 和 :lt(n) 过滤选择器示例
            $("ul li:eq(2)").css("background-color", "blue");
            $("ul li:gt(2)").css("color", "red");
            $("ul li:lt(2)").css("color", "green");
        });
    </script>
    <style type="text/css">
        p, li{
            padding: 10px;
            margin-top: 5px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <p>第一个段落</p>
    <p>中间的段落</p>
    <p>最后一个段落</p>

    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        <li>第五项</li>
    </ul>

</body>
</html>

上述代码中，对于第一个示例，使用了:first和:last选择器来选中第一个和最后一个段落，分别给它们设置了不同的背景颜色；对于第二个示例，使用了:even和:odd选择器来选中列表中的偶数和奇数项，分别给它们设置了不同的背景颜色；对于第三个示例，分别使用了:eq(n)、:gt(n)和:lt(n)选择器来选中列表中的第3项、索引大于2的项和索引小于2的项，分别修改了它们的字体颜色。

以上就是jQuery基本过滤选择器用法的攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery基本过滤选择器用法示例 - Python技术站

jQuery基本过滤选择器用法示例

什么是jQuery选择器？

jQuery基本过滤选择器的用法

相关文章