常用的jQuery基本过滤选择器：:eq()、:even()、:odd()、:first()、:last()、:gt()、:lt()用法

林林一928

已于 2024-04-13 17:21:45 修改

阅读量271

点赞数 16

文章标签： jquery 前端 javascript

于 2024-04-13 16:36:52 首次发布

本文链接：https://blog.csdn.net/m0_73765584/article/details/137717954

版权

简单表格示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <table border="2">
        <tr> <!-- 一行 -->
            <td>Row with Index #0</td><!-- 一列 -->
        </tr>
        <tr>
            <td>Row with Index #1</td>
        </tr>
        <tr>
            <td>Row with Index #2</td>
        </tr>
        <tr>
            <td>Row with Index #3</td>
        </tr>

    </table>
</body>

</html>

:eq(index) Selector

在匹配的集合中选择索引值为index的元素。

温馨提示：

index下标计算是从0开始的

我们选中 index=0 的一行，背景设置为 :pink

:even Selector

选择所引值为偶数的元素

特别注意

这是基于0的索引，所以:even选择器是选择第一个元素，第三个元素，依此类推在匹配。

:odd Selector

选择索引值为奇数元素

特别注意

这是基于0的索引，所以:odd选择器是选择第二个元素，第四个元素，依此类推在匹配。

简单表格示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="2">
        <tr>
            <td>Row with Index #0</td>
            <td>Row with Index #1</td>
            <td>Row with Index #2</td>

        </tr>
        <tr>
            <td>Row with Index #3</td>
            <td>Row with Index #4</td>
            <td>Row with Index #5</td>
        </tr>
        <tr>
            <td>Row with Index #6</td>
            <td>Row with Index #7</td>
            <td>Row with Index #8</td>
        </tr>

    </table>
</body>

</html>

:first Selector

选择第一个匹配的元素

:last Selector

选择最后一个匹配的元素

:gt(index) Selector

选择匹配集合中所有大于给定index（索引值）的元素

:lt(index) Selector

选择匹配集合中所有索引值小于给定index参数的元素

林林一928

关注

16
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
常用的jQuery基本过滤选择器：:eq()、:even()、:odd()、:first()、:last()、:gt()、:lt()用法

:eq()、:even()、:odd()、:first()、:last()、:gt()、:lt()用法总结
复制链接

扫一扫