关于jQuery_选择器扩展的介绍和基本使用

最新推荐文章于 2024-10-02 17:15:49 发布

NewBurlaSKing

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量128

点赞数

分类专栏： jQuery 文章标签： html 前端 javascript jquery

本文链接：https://blog.csdn.net/qq_55961861/article/details/126388649

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery_选择器扩展

一.扩展内容

Selector:eq(index)

在匹配的集合中选择索引值为index的元素。index下标计算是从0开始的

Selector:even

选择索引值为偶数的元素

Selector:odd

选择索引值为奇数元素

Selector:first

选择第一个匹配的元素
Selector:last

选择最后一个匹配的元素
Selector:gt(index)

选择匹配集合中所有大于给定index（索引值）的元素。
Selector:lt(index)

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

二.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
    <script>
        $('li:eq(1)').css('border','2px solid red');
    </script>
</body>
</html>

even and odd:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item3</td>
            <td>item4</td>
        </tr>
        <tr>
            <td>item5</td>
            <td>item6</td>
        </tr>
    </table>
    <script>
        $('tr:even').css('background-color','aqua');
        $('tr:odd').css('background-color','red');
    </script>
</body>
</html>

first and last：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>item1</td>
        </tr>
        <tr>
            <td>item2</td>
        </tr>
        <tr>
            <td>item3</td>
        </tr>
    </table>
    <script>
        $('tr:first').css('background-color','red');
        $('tr:last').css('background-color','aquamarine');
    </script>
</body>
</html>

gt and lt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item3</td>
            <td>item4</td>
        </tr>
        <tr>
            <td>item5</td>
            <td>item6</td>
        </tr>
    </table>
    <script>
        $('td:lt(3)').css('background-color','aqua');
        $('td:gt(2)').css('background-color','red');
    </script>
</body>
</html>