Bộ chọn hidden
Bộ chọn :hidden chọn tất cả các phần tử trên
trang đang bị ẩn.
Các phần tử có visibility: hidden hoặc
opacity: 0 được coi là hiển thị, vì chúng chiếm
chỗ trong bố cục. Các phần tử có thể được coi là không hiển thị
vì một số lý do: giá trị của thuộc tính css
display là none, hoặc đó là các phần tử có
thuộc tính type="hidden",
hoặc chiều cao hoặc chiều rộng của chúng được đặt thành 0,
hoặc phần tử cha của chúng bị ẩn.
Vì :hidden không thuộc đặc tả CSS,
nên để cải thiện hiệu suất trong các
trình duyệt hiện đại, tốt hơn nên lọc các phần tử trước
bằng cách sử dụng bộ chọn css thuần túy, sau đó
áp dụng .filter(':hidden').
Theo dõi khả năng hiển thị của các phần tử bằng các
phương pháp khác, ví dụ: bằng lớp,
có thể đảm bảo hiệu suất tốt hơn.
Cú pháp
Chúng ta chọn các phần tử bị ẩn như thế này:
$(':hidden');
Ví dụ
Hãy nhấp vào nút #test
để hiển thị các hình vuông đang vô hình:
<button id="test">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('#test').click(function() {
$('div:hidden').show('slow');
});
