jQuery :header Selector

Quiz

The :header selector in jQuery is used to select all header elements in the HTML document. It targets all header tags including <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

Syntax

Following is the syntax of :header selector in jQuery −

$(":header")

Parameters

Following are the parameters of this method −

":header" − This selector selects all header elements in the document.

Example 1

In the following example, we are demonstrating the basic usage of :header selector in jQuery −

<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>

When we execute the above program, the :header selector selects all the header elements and highlights them with a yellow background color.

Example 2

In this example, the :header selector is used to add ("highlight") class to all header elements within the document −

<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>

After executing the above program, the "highlight" will be added to all the header elements in the DOM.

jquery_ref_selectors.htm

Print Page