:visible 选择器
分类：选择器 > jQuery扩展选择器 | 选择器 > 可见性筛选选择器
visible selector
描述：选择所有的可见的元素。
加入于: 1.0
jQuery( ":visible" )如果元素在document中消耗了空间，它会被视为是可见的。可见的元素，它的宽度或高度大于0。
带visibility: hidden或者opacity: 0的元素会被视为可见，因为它们依然在布局上占位置。
不在document中的元素会被视为隐藏元素；jQuery无法知道这个元素在被追加到document上后是否可见，因为这取决于所适用的样式。
该选择器是:hidden选择器的对立面。因此，每个被:visibile选中的元素都不能被:hidden选择器选中，反之亦然。
所有的lt;select>选择器的<option>元素都会被视为隐藏元素，无论它们的选中状态如何。
在隐藏元素的动画过程中，元素被视为可见的，直到动画的终点。在显现元素的动画过程中，在动画的起点元素被视为可见的。
在jQuery 1.3.2中，如何计算:visible有所变化。这个发布公告写了改变的详情。
其它说明
- 因为
:visible是一个jQuery扩展，并不是CSS规范文档的一部分，使用:visible查询，不能充分利用原生DOM的querySelectorAll()方法来提高性能。要想在使用:visible选择元素时获得最佳性能，请先使用一个纯CSS选择器选择元素，然后使用.filter(":visible")作筛选。 - 过度使用这个选择器可能带来性能影响，因为它会强迫浏览器在它可以确定可见性之前重新呈现网页。
Tracking the visibility of elements via other methods, using a class for example, can provide better performance.
示例
使所有可见的div在点击后变成黄色。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>visible demo</title>
<style>
div {
width: 50px;
height: 40px;
margin: 5px;
border: 3px outset green;
float: left;
}
.starthidden {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
<script>
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
</script>
</body>
</html>
演示结果