:visible

选择所有可见的元素。

如果元素在文档中占有一定的空间，那么元素就被认为是可见的。可见元素的高或宽是大于 0 的。

visibility: hidden 或者 opacity: 0 的元素被认为是可见的，因为实际上，它们在页面布局中占据了一定的空间。在执行隐藏效果动画的元素也被认为是可见的，直到动画结束为止。在执行显示效果动画的元素，从动画的一开始就被认为是可见的。

从 jQuery 1.3.2 起，:visible 的计算方式发生了变动。可以访问 jQuery 1.3.2 更新信息 来获取更多内容。

补充说明:

  • 由于 :visible 是 jQuery 扩展出来的，它并不是 CSS 规范中的一部分。当使用 :visible 时，并不会比使用原生的 DOM 方法 querySelectorAll() 性能好。为了达到高效的 :visible 元素选择，请优先使用纯 CSS 选择器 .filter(":visible") 。

示例:

在所有可见的 div 上添加事件，当点击后变成黄色。

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
  .starthidden { display:none; }
  </style>
<script src="jquery.min.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>

演示: