Cách dùng :header Selector trong jQuery

:header Selector sẽ chọn tất cả các thẻ tiêu đề như h1, h2, h3 .v.v.

Chú ý: Bởi vì :header là một Jquery extension và không phải là một phần thiết lập của CSS, các truy vấn sử dụng :header sẽ không thể phát huy hiệu quả của phương thức querySelectorAll(). Để đạt được hiệu quả cao nhất khi sử dụng,  bạn nên sử dụng sử dụng một selector được thiết lập bởi css trước sau đó sử dụng :header để lọc lại kết quả chính xác.

Cú pháp

jQuery( ":header" )

Ví dụ

Tìm kiếm tất cả các thẻ tiêu đề và đổi màu chữ cho chúng:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Học lập trình miễn phí tại nguyengiatech.com</title>
        <script src="https://nguyengiatech.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <h1>Học lập trình miễn phí tại nguyengiatech.com</h1>
    
        <div id="header">
            <h1>Học lập trình miễn phí tại nguyengiatech.com</h1>
            <h2>Học lập trình miễn phí tại nguyengiatech.com</h1>
            <b>Học lập trình miễn phí tại nguyengiatech.com</b>
        </div>
        <div>
            <span>Đây là thẻ span thứ 1</span>
            <span class="ab va">Đây là thẻ span thứ 2</span>
            <span>Đây là thẻ span thứ 3</span>
        </div>
        <button onclick="myFunction()">Click vào đây để xem kết quả</button>
        <script>
            function myFunction(){
                $( ":header" ).css( "color", "red");
            }
        </script>
    </body>
</html>

Kết quả:

 

Tham khảo: jquery.com

Bài liên quan