:hidden Selector trong jquery
:hidden Selector sẽ lựa chọn tất cả các phần tử đang bị ẩn đi. Các phần tử được xem là ẩn đi bởi một trong các lí do sau: Phần tử chứa thuộc tính display=none. Phần tử form có type=hidden. Phần tử có awidth và height được thiết lập bằng 0. Phần tử nằm trong một phần tử ...
:hidden Selector sẽ lựa chọn tất cả các phần tử đang bị ẩn đi.
Các phần tử được xem là ẩn đi bởi một trong các lí do sau:
- Phần tử chứa thuộc tính display=none.
- Phần tử form có type=hidden.
- Phần tử có awidth và height được thiết lập bằng 0.
- Phần tử nằm trong một phần tử cha bị ẩn nên không được hiển thị trên trang.
Các yếu tố visibility: hidden hoặc opacity: 0 được xem là không bị ẩn vì chúng vẫn chiếm không gian trong bố cục. Trong suốt quá trình chuyển động của phần tử, phần tử sẽ được xem là ẩn khi quá trình chuyển động kết thúc.
Các phần tử không nằm trong tài liệu không được coi là có hiển thị, Jquery không có cách nào để biết chúng có thể hiển thị hay không khi nối vào tài liệu vì còn phụ thuộc vào các kiểu phù hợp.
Selector này là nghịch đảo của :visible selector vì vậy những phần tử được chọn bởi nó sẽ không thể được chọn bởi :visible selector.
Trong suốt quá trình chuyển động của một phần tử, nó được xem là hiển thị khi bắt đầu chuyển động.
Trong Jquery 1.3.2 một phần tử được xem là ẩn khi nó hoặc bất cứ phần tử cha nào của nó không tiêu tốn không gian trong tài liệu.Tính năng hiển thị CSS sẽ không được tính đến(do đó $( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false) .
Jquery 3 đã thay đổi một chút về ý nghĩa của :hidden do vậy sẽ ảnh hưởng đến :visible. Một phần tử được xem là ẩn khi nó không được chứa bởi bất cứ vùng nào trên trang. Ví dụ, thẻ br sẽ không được chọn bởi :hidden selector.
Chú ý: Bởi vì :hidden là một Jquery extension và không phải là một phần thiết lập của CSS, các truy vấn sử dụng :hidden sẽ không thể phát huy hiệu quả của phương thức querySelectorAll(). Để đạt được hiệu quả cao nhất khi sử dụng, bạn nên sử dụng sử dụng một selector được thiết lập bởi css trước sau đó sử dụng :hidden để lọc lại kết quả chính xác.
Việc sử dụng selector này sẽ làm giảm hiệu suất vì nó yêu cầu trình duyệt phải render lại trang trước khi nó có thể xác định đâu là phần tử bị ẩn đi. Theo dõi sự hiện thị của các phần tử thông qua cách khác (ví dụ như class) có thể gia tăng tốc độ của trang.
Cú pháp
jQuery( ":hidden" )
Ví dụ
Tìm kiếm thẻ div và thẻ input bị ẩn đi và hiện thị chúng:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại code24h.com</title>
<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 style="display:none;">Thẻ div bị ẩn</div>
<div></div>
<div class="starthidden">Thẻ div không bị ẩn</div>
<div></div>
<form>
<input type="hidden" value="ô input bị ẩn">
<input type="hidden" value="ô input bị ẩn">
<input type="hidden" value="ô input bị ẩn">
</form>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( "div:hidden" ).css( {
color: "red",
display: "block",
});
$( "input:hidden" ).attr('type',"text");
}
</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
