Descendant Selector (“ancestor descendant”) là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để chọn tất cả các phần tử con cháu (descendants) của một phần tử tổ tiên (ancestor) cụ thể.
1. Cú pháp
Cú pháp:
$("ancestor descendant")
Hoặc:
jQuery("ancestor descendant")
Tham số:
- ancestor: Một bất kỳ lựa chọn hợp lệ nào, đại diện cho phần tử tổ tiên (ancestor).
- descendant: Một lựa chọn để lọc các phần tử con cháu (descendants).
Kết quả trả về:
- Tất cả các phần tử con cháu (descendants) của phần tử tổ tiên (ancestor) được chọn.
Phiên bản:
- Được giới thiệu từ phiên bản 1.0 của jQuery.
2. Phân biệt Descendant Selector và Child Selector
Descendant Selector và Child Selector trong thư viện jQuery đều là cách để lựa chọn các phần tử dựa trên cấu trúc cây của DOM (Document Object Model), tuy nhiên, chúng khác nhau về phạm vi lựa chọn và cấu trúc cú pháp.
2.1. Child Selector (“parent > child”)
Phạm vi lựa chọn: Child Selector chỉ lựa chọn các phần tử con trực tiếp của phần tử mẹ (parent). Nó không chọn các phần tử cháu, cháu cháu, và các phần tử con của cháu.
Cú pháp: Sử dụng cú pháp “parent > child”, trong đó “parent” là phần tử cha và “child” là phần tử con.
Ví dụ cú pháp: $("parent > child").
2.2. Descendant Selector (“ancestor descendant”)
Phạm vi lựa chọn: Descendant Selector lựa chọn tất cả các phần tử con cháu của một phần tử tổ tiên cụ thể, bao gồm cả phần tử cháu, chắt của phần tử con và các cấp cháu khác.
Cú pháp: Sử dụng cú pháp “ancestor descendant”, trong đó “ancestor” là phần tử tổ tiên và “descendant” là phần tử con cháu.
Ví dụ cú pháp: $("ancestor descendant").
2.3. So sánh sự khác nhau
Child Selector chọn các phần tử con trực tiếp, trong khi Descendant Selector chọn tất cả các phần tử con, kể cả các cấp con cháu.
Child Selector có phạm vi lựa chọn hẹp hơn, tập trung vào các phần tử con ngay lập tức. Trong khi đó, Descendant Selector có phạm vi lựa chọn rộng hơn, bao gồm các phần tử con ở mọi cấp.
Child Selector (“parent > child”) thường nhanh hơn vì phạm vi lựa chọn nhỏ hơn, trong khi Descendant Selector (“ancestor descendant”) có thể tốn nhiều thời gian hơn vì phạm vi lựa chọn lớn hơn và cần duyệt qua nhiều phần tử.
3. Một số ví dụ
3.1. Dùng Descendant Selector để tạo ra Dropdown Menu nhiều cấp
Ví dụ dưới đây là một demo đơn giản về cách tạo dropdown menu nhiều cấp bằng cách sử dụng Descendant Selector của thư viện jQuery.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Menu Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li>
<a href="#">Product 2</a>
<ul>
<li><a href="#">Subproduct A</a></li>
<li><a href="#">Subproduct B</a></li>
</ul>
</li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<script>
$(document).ready(function() {
//Ẩn các menu con lúc ban đầu
$('.menu li ul').hide();
// Tạo hiểu ứng mở menu con khi hover menu cha
$('.menu li').hover(
function() {
$(this).children('ul').fadeIn('slow');
},
function() {
$(this).children('ul').fadeOut('slow');
}
);
});
</script>
</body>
</html>
Sử dụng các hàm của thư viện jQuery để thêm hiệu ứng hiển thị (fade in) và ẩn (fade out) khi di chuột vào mục menu chính và các mục con.
- Dùng
$('.menu li ul').hide();để ẩn menu con ban đầu. - Sử dụng
.hover()để thêm hiệu ứng hiển thị và ẩn menu con khi di chuột vào và ra khỏi mục menu chính.
Ví dụ này giúp minh họa cách sử dụng Descendant Selector để chọn các phần tử con cấp dưới của một phần tử cha và tạo hiệu ứng dropdown menu nhiều cấp khi di chuột vào các mục menu chính.
3.2. Sự khác biệt giữa Descendant Selector và Child Selector
Dưới đây là ví dụ minh họa sự khác biệt giữa Descendant Selector (ancestor descendant) và Child Selector (parent > child) trong thư viện jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Selector Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.parent {
background-color: lightblue;
padding: 10px;
margin: 10px;
}
.child {
background-color: lightgreen;
padding: 10px;
margin: 5px;
}
.grandchild {
background-color: lightyellow;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="parent">
Parent Div
<div class="child">First Child Div
<div class="grandchild">First Grandchild Div</div>
<div class="grandchild">Second Grandchild Div</div>
</div>
<div class="child">Second Child Div
<div class="grandchild">Third Grandchild Div</div>
<div class="grandchild">Forth Grandchild Div</div>
</div>
</div>
<button id="descendantSelectorBtn">Descendant Selector</button>
<button id="childSelectorBtn">Child Selector</button>
<script>
$(document).ready(function() {
$('#descendantSelectorBtn').click(function() {
$('.parent div').css('color', 'red');
});
$('#childSelectorBtn').click(function() {
$('.parent > div').css('color', 'blue');
});
});
</script>
</body>
</html>
Descendant Selector ($(‘.parent div’)): Selector này chọn tất cả các phần tử div mà là con cháu (descendants) của phần tử có class .parent.
Bất kể chúng có là con trực tiếp hay cháu nội của .parent, đều sẽ được chọn và thay đổi màu chữ thành đỏ khi nhấn nút “Descendant Selector”.
Child Selector ($(‘.parent > div’)): Selector này chỉ chọn các phần tử div là con trực tiếp (child) của phần tử .parent.
Nghĩa là, nó chỉ chọn những phần tử div mà là con trực tiếp của .parent. Khi nhấn nút “Child Selector”, chỉ những phần tử div trực tiếp con của .parent sẽ được chọn và thay đổi màu chữ thành xanh. Các div cháu nội không được chọn.
