07/01/2019, 14:11
JQuery API: All Selector (“*”)
all-selector được sử dụng khi muốn chọn toàn bộ các phần tử html. Cú pháp Cú pháp jQuery( "*" ) Lưu ý : toàn bộ các selector sẽ được chọn khi sử dụng all selector, tuy nhiên nếu sử dụng nó kết hợp với một ...
all-selector được sử dụng khi muốn chọn toàn bộ các phần tử html.
Cú pháp
Cú pháp
jQuery( "*" )
Lưu ý: toàn bộ các selector sẽ được chọn khi sử dụng all selector, tuy nhiên nếu sử dụng nó kết hợp với một selector có nhiều kết quả, nó sẽ mang ý nghĩa là chọn toàn bộ các phần tử của selector đó( xem ví dụ để hiểu rõ hơn).
Ví dụ
Ví dụ 1: Tìm tất cả các phần tử bao gồm cả các thẻ head, body, link, script ... Lưu ý rằng nếu trình duyệt của bạn được thêm các Add-on và các Add-on đó sẽ thêm các thẻ <script> hoặc các thẻ <link> thì những thẻ này cũng sẽ được all-selector chọn:
Code
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>all demo</title>
<style>
h3 {
margin: 0;
}
h1, span, p {
margin-top: 10px;
margin-bottom: 10px;
float: left;
awidth: 100%;
display: block;
background-color: #EEEEEE;
}
</style>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="container">
<h1>Học lập trình miễn phí tại code24h.com</h1>
<p>Thẻ P</p>
<span>SPAN</span>
</div>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
var elementCount = $( "*" ).css( "border", "1px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
}
</script>
</body>
</html>Kết quả:
Ví dụ 2: Sử dụng all-selector kết hợp với selector để tìm kiếm tất cả các phần tử nằm trong thẻ div có id = container:
Code
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>all demo</title>
<style>
h3 {
margin: 0;
}
h1, span, p {
margin-top: 10px;
margin-bottom: 10px;
float: left;
awidth: 100%;
display: block;
background-color: #EEEEEE;
}
</style>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="container">
<h1>Học lập trình miễn phí tại code24h.com</h1>
<p>Thẻ P</p>
<span>SPAN</span>
</div>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
var elementCount = $( "#container" ).find( "*" ).css( "border", "1px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
}
</script>
</body>
</html>Kết quả:
Tham khảo: jquery.com
Nguồn: code24h.com
