jQuery :first-child 选择器

jQuery 中的:first-child 选择器用于选择其父元素内的第一个子元素。此选择器通常用于对父元素的第一个子元素应用样式或执行操作。此选择器适用于所有 HTML 元素。

如果我们想选择其父元素的最后一个子元素，我们需要使用:last-child 选择器。

语法

以下是 jQuery 中 :first-child 选择器的语法：

$(":first-child")

参数

:first-child 选择指定父元素的第一个子元素。

示例 1

在以下示例中，我们使用“:first-child”选择器来选择每个无序列表中的第一个列表项：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("ul li:first-child").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <ul>
        <li>First item in second list</li>
        <li>Second item in second list</li>
    </ul>
</body>
</html>

当我们执行上述程序时，每个无序列表中的第一个列表项将以黄色背景颜色突出显示。

示例 2

在此示例中，我们选择每个表中的第一行：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("table tr:first-child").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>First row, first cell</td>
            <td>First row, second cell</td>
        </tr>
        <tr>
            <td>Second row, first cell</td>
            <td>Second row, second cell</td>
        </tr>
    </table>
    <br><br>
    <table border="1">
        <tr>
            <td>First row, first cell in second table</td>
            <td>First row, second cell in second table</td>
        </tr>
        <tr>
            <td>Second row, first cell in second table</td>
            <td>Second row, second cell in second table</td>
        </tr>
    </table>
</body>
</html>

当我们执行上述程序时，每个表中的第一行将以黄色背景颜色突出显示。

示例 3

在这里，我们选择所有 <div> 元素的第一个 <p> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div p:first-child").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div style="border: 1px solid black;">
        <p>First paragraph in first div</p>
        <p>Second paragraph in first div</p>
    </div>
    <br>
    <div style="border: 1px solid black;">
        <p>First paragraph in second div</p>
        <p>Second paragraph in second div</p>
    </div>
</body>
</html>

执行上述程序后，所有 <div> 元素的第一个 <p> 元素将以黄色背景颜色突出显示。

jquery_ref_selectors.htm

打印页面