14/08/2018, 09:45
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 ...
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 có 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://code24h.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 code24h.com</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
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
