Home > JQuery API > jQuery Selector > Descendant Selector (“ancestor descendant”)

Hàm Descendant Selector (“ancestor descendant”) trong jQuery

Descendant Selector sẽ chọn tất cả các phần tử con cháu của phần tử được cung cấp.

Các phần tử con cháu là các phần tử con level 1, level 2, level 3 .v.v. của phần tử được cung cấp.

Cú pháp

Cú pháp
jQuery( "ancestor descendant" )

Trong đó:

  • ancestor là một selector hợp lệ.
  • descendant là một selector khác để lọc lại các phần tử con cháu của ancestor.

Ví dụ

Tìm kiếm tất cả các phần tử con của thẻ div id=container sau đó thêm border và đổi màu cho chúng:

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>all demo</title>
        <style> background: #efe;
            }
            div {
                color: red;
            }
        </style>
        <script src="https://freetuts.net/cnd/js/jquery/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>
         
        <div id="container">
            <div>
                <div>This is a test</div>
                <div>This is a test 2</div>
                <div>This is a test 3</div>
            </div>
            <input type="text" name="test">
            <input type="button" name="button" value="Button">
            <h2>This is H2 content</h2>
        </div>
        <button onclick="myFunction()">Click vào đây để xem kết quả</button>
        <script>
            function myFunction(){
                $( "#container div" ).css( "border", "2px solid blue" );
                $( "#container div" ).css({ "backgroundColor": "yellow", "margin": "5px" });
            }
        </script>
    </body>
</html>

Kết quả:

 

Tham khảo: jquery.com

Bình luận đã đóng, nếu có thắc mắc hãy đặt câu hỏi tại hoicode.com để admin trả lời.

Nguồn: freetuts.net

BÀI VIẾT

notice png LIST home png HOME hot gif BÁO
LỖI
top png TOP