jQuery选择器之基本过滤选择器详解

在jQuery中，选择器是最常用的语法之一。过滤选择器可以对选择器的结果集进行过滤，从而更加专业地选择自己需要的元素，提高代码的灵活性。本篇攻略将详细讲解基本过滤选择器。

1. :first选择器

该选择器选取所选元素的第一个元素。

注意：
:frist(1)和:eq(0)是等价的，但:first与:first-child不同，后者选择父元素下的第一个子元素。

示例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>列表项一</li>
        <li class="first">列表项二</li>
        <li>列表项三</li>
    </ul>

    <script>
        $("li:first").css("color", "red");
    </script>
</body>
</html>

上述代码选中了ul下的第一个li元素，并将该元素的文字修改为红色。

示例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div>
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
    </div>

    <script>
        $("div p:first-child").css("color", "red");
    </script>
</body>
</html>

上述代码选中了div下第一个p元素，并将该元素的文字修改为红色。

2. :last选择器

该选择器选取所选元素的最后一个元素。

注意：:last(1)和:eq(-1)是等价的，但:last与:last-child不同，后者选择父元素下的最后一个子元素。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:last选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>列表项一</li>
        <li class="last">列表项二</li>
        <li>列表项三</li>
    </ul>

    <script>
        $("li:last").css("color", "red");
    </script>
</body>
</html>

上述代码选中了ul下的最后一个li元素，并将该元素的文字修改为红色。

3. :even选择器

该选择器选取所选元素中所有索引值为偶数的元素，即选中第一、第三个、第五个元素等。

注意：:even与:nth-child(2n)和:nth-of-type(2n)等价。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:even选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>列表项一</li>
        <li class="even">列表项二</li>
        <li>列表项三</li>
        <li class="even">列表项四</li>
        <li>列表项五</li>
    </ul>

    <script>
        $("li:even").css("color", "red");
    </script>
</body>
</html>

上述代码选中了所有索引值为偶数的li元素，并将这些元素的文字修改为红色。

4. :odd选择器

该选择器选取所选元素中所有索引值为奇数的元素，即选中第二个、第四个、第六个元素等。

注意：:odd与:nth-child(2n+1)和:nth-of-type(2n+1)等价。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:odd选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>列表项一</li>
        <li class="odd">列表项二</li>
        <li>列表项三</li>
        <li class="odd">列表项四</li>
        <li>列表项五</li>
    </ul>

    <script>
        $("li:odd").css("color", "red");
    </script>
</body>
</html>

上述代码选中了所有索引值为奇数的li元素，并将这些元素的文字修改为红色。

5. :eq选择器

该选择器选取所选元素中指定索引值的元素，索引值从0开始。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:eq选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li class="eq">列表项三</li>
        <li>列表项四</li>
        <li>列表项五</li>
    </ul>

    <script>
        $("li:eq(2)").css("color", "red");
    </script>
</body>
</html>

上述代码选中了ul下的第三个li元素，并将该元素的文字修改为红色。

6. :lt选择器

该选择器选取所选元素中索引值小于指定索引值的元素。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:lt选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li class="lt">列表项三</li>
        <li class="lt">列表项四</li>
        <li>列表项五</li>
    </ul>

    <script>
        $("li:lt(2)").css("color", "red");
    </script>
</body>
</html>

上述代码选中了ul下的前两个li元素，并将这两个元素的文字修改为红色。

7. :gt选择器

该选择器选取所选元素中索引值大于指定索引值的元素。与:lt相似，:gt同样选取了所有索引值大于指定索引值的元素。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:gt选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>列表项一</li>
        <li class="gt">列表项二</li>
        <li class="gt">列表项三</li>
        <li>列表项四</li>
        <li>列表项五</li>
    </ul>

    <script>
        $("li:gt(0)").css("color", "red");
    </script>
</body>
</html>

上述代码选中了ul下的索引值大于0的li元素，并将这些元素的文字修改为红色。

8. :header选择器

该选择器选取所有标题标签（h1-h6），与之对应的是:not(:header)选择器，表示除标题外的其他所有标签。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:header选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <span>非标题标签</span>

    <script>
        $(":header").css("color", "red");
    </script>
</body>
</html>

上述代码选取了网页中所有标题标签(h1-h6)，并将这些标签的文字修改为红色。

9. :button选择器

该选择器选取所有按钮元素，包括input标签的type为button、submit、reset、image的元素，同时也包括button标签元素。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:button选择器示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <button>按钮</button>
    <input type="button" value="按钮">
    <input type="submit" value="提交">
    <input type="reset" value="重置">

    <script>
        $(":button").css("color", "red");
    </script>
</body>
</html>

上述代码选取了网页中所有按钮元素，并将它们的文字修改为红色。

结语

上述内容便是本篇攻略的所有内容，基本过滤选择器非常基础实用，掌握它们的使用规则对于提高代码的编写效率十分重要。将会在不同场景中有更广泛的应用，希望本篇攻略对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery选择器之基本过滤选择器详解 - Python技术站

jquery选择器之基本过滤选择器详解