Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn phương thức truyền tải Ancestor trong jQuery.
Truyền tải qua cây DOM
Trong các mối quan hệ logic, ancestor là cha mẹ, ông bà, ông cố, v.v.
jQuery cung cấp các phương thức hữu ích như parent(), parents() và parentsUntil() mà bạn có thể sử dụng để duyệt qua cây DOM một hoặc nhiều cấp để dễ dàng lấy ra các phần tử cha mẹ hoặc tổ tiên trong cấu trúc phân cấp.
Phương thức parent()
Phương thức parent() được sử dụng để lấy ra trực tiếp phần tử cha mẹ của phần tử được chọn.
Ví dụ sau đây sẽ làm nổi bật phần tử cha trực tiếp của <li> là <ul> bằng cách thêm class .highlight trong chương trình.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<title>Lấy ra phần tử cha</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").parent().addClass("highlight"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>Đây là một <em>ví dụ</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> |
Phương thức parents()
Phương thức parents() được sử dụng để lấy ra ancestors (tổ tiên) của phần tử được chọn.
Ví dụ sau sẽ thêm một border xung quanh tất cả các phần tử tổ tiên của <li> là các phần tử <ul>, <div>, <body> và <html>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<title>phương thức parents</title> <style type="text/css"> *{ margin: 10px; } .frame{ border: 2px solid green; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").parents().addClass("frame"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>Đây là một <em>Ví dụ</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> |
Bạn có thể tùy ý bao gồm một hoặc nhiều selector làm tham số trong phương thức parents() để lọc kết tìm kiếm của các phần tử tổ tiên. Ví dụ sau sẽ áp dụng border xung quanh tất cả phần tử tổ tiên của <li> là các phần tử <div>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<title>Phương thức parents</title> <style type="text/css"> *{ margin: 10px; } .frame{ border: 2px solid green; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").parents("div").addClass("frame"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>Đây là một <em>Ví dụ</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> |
Phương thức parentsUntil()
Phương thức jQuery ParentUntil() được sử dụng để lấy ra tất cả các phần tử tổ tiên nhưng không bao gồm các phần tử có trong bộ lọc. Nói một cách đơn giản, chúng ta có thể nói nó trả về tất cả các phần tử tổ tiên giữa hai phần tử đã cho trong hệ thống phân cấp DOM.
Ví dụ sau sẽ thêm một border xung quanh tất cả các phần tử tổ tiên của phần tử <li> không bao gồm phần tử <html> tức là thêm phần viền vào phần tử <ul>, <div> và <body>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<title>Phương thức parentsUntil </title> <style type="text/css"> *{ margin: 10px; } .frame{ border: 2px solid green; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").parentsUntil("html").addClass("frame"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>Đây là một <em>ví dụ</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> |
Kết luận
Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn Phương thức truyền tải Ancestor. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Phương thức truyền tải Descendant trong jQuery.
Chúc các bạn học tập tốt!
