Người Viết : ViKiMi Editor

Thực hiện tìm kiếm phần tử con trực tiếp bằng phương thức Children & Duyệt trên DOM
Thư viện jQuery còn hỗ trợ tìm kiếm các phần tử con trên cây DOM. Việc này hoàn toàn phù hợp để tương đồng với tính năng tìm kiếm phần tử cha được cung cấp trước đây. Với việc có thể tìm kiếm các phần tử con thì chúng ta có thể duyệt cây DOM một cách chiều sâu hơn. Chính vì có thể duyệt cây DOM theo nhiều cách mà sẽ đưa ra được nhiều xử lý hơn.
Sự kết hợp giữa jQuery và CSS cũng sẽ đem lại nhiều thiết kế hơn.
Nhất là với những Website muốn thực hiện các thiết kế nổi bật.
Như vậy, nên Thư viện jQuery sẽ được dùng nhiều hơn (Vì nó sẵn có và thuận tiện).
THƯ VIỆN JQUERY CUNG CẤP PHƯƠNG THỨC :
+ Children() Method
Đây là phương thức cho phép trả về tất cả phần tử con trực tiếp của phần tử được chọn, dựa vào các yêu cầu lọc khác nhau của Nhà Phát Triển.
CÚ PHÁP ::
+ $( SELECTOR ). Children();
+ $( SELECTOR ). Children(Param1, Param2, … , ParamN);
[ Param ] : ( Tuỳ chọn )
Bạn có thể lựa chọn truyền tham số hoặc không truyền tham số.

A ] Không truyền tham số
Khi lựa chọn sử dụng phương thức Children() không truyền tham số.
Kết quả trả về là tất cả các phần tử con trực tiếp của phần tử được chọn.
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<style>
/* Tạo Kiểu CSS cho tất cả các phần tử
* bên trong phần tử có class : huedue
*/
.huedue * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* Duyệt tất cả PT Con trực tiếp của div.huedue
* Tạo Kiểu CSS cho tất cả các phần tử con trực tiếp
* bên trong phần tử có div.huedue
*/
$("div.huedue"). children(). css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="huedue" style="width:500px;">DIV (current element)
<p>p (Lớp Con)
<span>span (Lớp Cháu)</span>
</p>
<p>p (Lớp Con)
<span>span (Lớp Cháu)</span>
</p>
<p>p (Lớp Con)
<span>span (Lớp Cháu)</span>
</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :

B ] Có truyền tham số
Khi lựa chọn sử dụng phương thức Children() truyền tham số.
Kết quả trả về là tất cả các phần tử con trực tiếp của phần tử được chọn, dựa trên các tham số tuỳ chọn truyền vào để tìm kiếm phần tử con.
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<style>
/* Tạo Kiểu CSS cho tất cả các phần tử
* bên trong phần tử có class : huedue
*/
.huedue * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* Duyệt tất cả PT Con trực tiếp của div.huedue
* Theo các tham số tuỳ chọn
* Tạo Kiểu CSS cho tất cả các phần tử con trực tiếp
* bên trong phần tử có div.huedue
*/
$("div.huedue").children("p.first, p.second, div.div1").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="huedue" style="padding: 5px; width:500px;border: 2px solid blue">DIV (current element)
<p class="first">p (lỚP Con)
<span>span (lỚP Cháu)</span>
</p>
<p class="second">p (lỚP Con)
<span>span (lỚP Cháu)</span>
</p>
<div class="div1">div (lỚP Con)
<p class="third">p (lỚP Cháu)
<span>span (lỚP Chắt)</span>
</p>
</div>
</div>
</body>
</html>
Hình Ảnh Kết Quả :

Như vậy, thật dễ dàng để sử dụng phương thức Children để duyệt các phần tử con trực tiếp của một phần tử được chọn. Nhờ đó có thể tạo các kiểu CSS khác nhau cho tất cả các phần tử con trực tiếp của phần tử được chọn. Dựa vào các tham số tuỳ chọn truyền vào thì có thể nâng cao tính năng lọc để có kết quả chính xác hơn nữa.
+ Phương thức Children() trả về các phần tử con TRỰC TIẾP của phần tử được chọn