jQuery :first-of-type 选择器

jQuery 中的:first-of-type 选择器用于选择其父元素内相同类型（例如，<p>，<div> 等）的第一个元素。此选择器可用于设置样式或操作其父元素内特定类型元素的首次出现。

语法

以下是 jQuery :first-of-type 选择器的语法：

$(" :first-of-type");

参数

以下是上述语法的描述：

:first-of-type − 选择其父元素内相同类型中的第一个元素。

示例 1

在下面的示例中，我们使用 jQuery :first-of-type 选择器来选择 <div> 内的第一个 <p> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Change the color of the first <p> element within the <div>
            $("div p:first-of-type").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div>
        <p>First paragraph in div.</p>
        <p>Second paragraph in div.</p>
    </div>
</body>
</html>

执行上述程序后，所选元素将以黄色背景色突出显示。

示例 2

在此示例中，我们选择 <ul> 内的第一个 <li> 元素：

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

执行后，所选 <li> 项目将以黄色背景色突出显示。

示例 3

在这里，我们选择 <section> 内的第一个 <h1> 元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Heading in section</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Change the font size of the first <h1> element within the <section>
            $("section h1:first-of-type").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <section>
        <h1>First heading in section</h1>
        <h1>Second heading in section</h1>
    </section>
</body>
</html>

<section> 内的第一个 <h1> 元素将以黄色背景色突出显示。

jquery_ref_selectors.htm

打印页面