:hidden 选择器

类别：选择器 > jQuery扩展 | 选择器 > 可性性筛选器

hidden selector

描述：选择所有隐藏的元素。

  • 增补版本：1.0jQuery( ":hidden" )

元素可以出于一些原因而被视为隐藏：

  • CSS display属性值为none。
  • 它们是type="hidden"形式的表单元素。
  • 它们的宽度和高度明确设置为0。
  • 祖先元素是隐藏的，所以该元素也没显示在网页上。

带有visibility: hidden或opacity: 0的元素被视为可见的，因为它们依然在布局中消费空间。在隐藏元素的动画过程中，元素被视为可见的，直到动画结束。

不在文档中的元素被视为不可见。

此选择器是:visible选择器的对立。所以，由:hidden选中的每个元素都不能用:visible选中，反之亦然。

在显示一个元素的动画过程中，在动画的开头，元素被视为可见的。

jQuery 1.3.2中修改了确定:hidden的方式。如果在文档中，某元素或它的任一个父元素不消耗空间，该元素就被假定为隐藏。CSS可视性不作数（因此 $( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false）。发布备忘勾勒了更多细节的更改。

jQuery 3轻微修改了:hidden的意义（因此也修改了:visible的意义）。从该版本开始，如果某元素不具有布局盒，它会被视为:hidden。br元素和不带内容的内联元素将不会被:hidden选择器选中。

补充说明：

  • 因为:hidden是一个jQuery扩展，不是CSS规范文档的一部分，所以使用:hidden查询不能利用原生DOM querySelectorAll()方法提供的性能提升。若要在使用:hidden时实现选择元素的最佳性能，请先用纯CSS选择器选择元素，然后使用.filter(":hidden")。
  • 大量使用此选择器可能带来性能问题，因为它可能迫使浏览器在确定可见性之前重新渲染页面。通过其它方法跟踪元素的可见性，例如，使用类，可以提供更好的性能。

示例：

显示所有的隐藏的<div>，并计数隐藏的输入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!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>
// In some browsers :hidden includes head, title, script, etc...
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>

演示：