jQuery :header 選擇器

jQuery 中的:header 選擇器用於選擇 HTML 文件中的所有標題元素。它會定位所有標題標籤，包括<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>。

語法

以下是 jQuery 中 :header 選擇器的語法：

$(":header")

引數

以下是此方法的引數：

":header" − 此選擇器選擇文件中的所有標題元素。

示例 1

在以下示例中，我們演示了 jQuery 中 :header 選擇器的基本用法：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":header").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <h1>Main Title</h1>
    <h2>Subtitle</h2>
    <h3>Section Title</h3>
    <p>This is a paragraph.</p>
</body>
</html>

當我們執行上述程式時，:header 選擇器會選擇所有標題元素，並以黃色背景顏色突出顯示它們。

示例 2

在此示例中，:header 選擇器用於向文件中的所有標題元素新增 ("highlight") 類：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":header").addClass("highlight");
        });
    </script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>Main Title</h1>
    <h2>Subtitle</h2>
    <h3>Section Title</h3>
    <p>This is a paragraph.</p>
</body>
</html>

執行上述程式後，"highlight" 將新增到 DOM 中的所有標題元素。

jquery_ref_selectors.htm

列印頁面