jQuery_选择器之jQuery扩展(二)-【官方】百战程序员_IT在线教育培训机构


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
        </tr>
    </table>
    <script>$("tr:first").css("background-color", "red");</script>
</body>
</html>

:last Selector

选择最后一个匹配的元素


xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
        </tr>
    </table>
    <script>$("tr:last").css("background-color", "red");</script>
</body>
</html>

:gt(index) Selector

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


xxxxxxxxxx
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>gt demo</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>TD #0</td>
            <td>TD #1</td>
            <td>TD #2</td>
        </tr>
        <tr>
            <td>TD #3</td>
            <td>TD #4</td>
            <td>TD #5</td>
        </tr>
        <tr>
            <td>TD #6</td>
            <td>TD #7</td>
            <td>TD #8</td>
        </tr>
    </table>
    <script>
        $("td:gt(4)").css("backgroundColor", "yellow");
    </script>
</body>
</html>

:lt(index) Selector

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


xxxxxxxxxx
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>gt demo</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>TD #0</td>
            <td>TD #1</td>
            <td>TD #2</td>
        </tr>
        <tr>
            <td>TD #3</td>
            <td>TD #4</td>
            <td>TD #5</td>
        </tr>
        <tr>
            <td>TD #6</td>
            <td>TD #7</td>
            <td>TD #8</td>
        </tr>
    </table>
    <script>
        $("td:lt(4)").css("backgroundColor", "yellow");
    </script>
</body>
</html>

实时效果反馈

1. 下列jQuery扩展选择器中,哪个是通过index下标选择某一个元素：

A :eq(index) Selector

B :even Selector :odd Selector

C :first Selector :last Selector

D :gt(index) Selector :lt(index) Selector

答案

1=>A

jQuery_选择器之jQuery扩展(一) jQuery_DOM操作(一)

北京市昌平区回龙观镇南店村综合商业楼2楼226室