:hidden 选择器
分类：选择器 > jQuery扩展选择器 | 选择器 > 可见性筛选选择器
hidden selector
描述：选择所有隐藏的元素。
加入于: 1.0
jQuery( ":hidden" )元素可能因为几种原因而被视为隐藏：
- 它们具有CSS属性
display: none。 - 它们是表单元素，且
type="hidden"。 - 它们的宽度和高度被显式地设置为0。
- 一个祖先元素被隐藏了，所以元素也不显示在网页上。
带visibility: hidden或者opacity: 0的元素会被视为可见，因为它们依然在布局上占位置。在隐藏一个元素的动画过程中，元素会被视为可见，直到结束动画。
不在document上的元素不会被视为可见；jQuery无法知道这个元素在被追加到document上后是否可见，因为这取决于所适用的样式。
该选择器是:visible选择器的对立面。因此，每个被:hidden选中的元素都不能被:visibile选择器选中，反之亦然。
在显现元素的动画过程中，在动画的起点元素被视为可见的。
在jQuery 1.3.2中，:hidden的定义有所改变。一个元素如果它或它的父元素不在文档中占位置，它被假定为隐藏。CSS的属性visibility不记入内（因此$( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false）。jQuery 1.3.2发布公告详细地讲解了这个改变。
其它说明
- 因为
:hidden是一个jQuery扩展，并不是CSS规范文档的一部分，使用:hidden查询，不能充分利用原生DOM的querySelectorAll()方法来提高性能。要想在使用:hidden选择元素时获得最佳性能，请先使用一个纯CSS选择器选择元素，然后使用.filter(":hidden")作筛选。 - 过度使用这个选择器可能带来性能影响，因为它会强迫浏览器在它可以确定可见性之前重新呈现网页。用别的方法跟踪元素的可见性，比如说使用样式类，可以提供更好的性能。
示例
显示所有的隐藏的div，并记数所有的type="hidden"的<input>。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hidden demo</title>
<style>
div {
width: 70px;
height: 40px;
background: #e7f;
margin: 5px;
float: left;
}
span {
display: block;
clear: left;
color: red;
}
.starthidden {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>
<form>
<input type="hidden">
<input type="hidden">
<input type="hidden">
</form>
<span></span>
<script>
// 在一些浏览器中，:hidden包括<head>、<title>、<script>，等等
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
$( "span:first" ).text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
$( "span:last" ).text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
</script>
</body>
</html>
演示结果