14/08/2018, 09:38
All Selector (“*”) trong jquery
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ẽ ...
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
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
