:visible

选择所有可见的元素。

元素可能出于以下几个理由而被隐藏：

  • 他们的 CSS 中 display 值为 none。
  • 他们是表单元素，带有 type="hidden" 属性。
  • 他们的高和宽被设置成 0。
  • 他们的祖辈元素被隐藏了，所以他们也没有在页面中显示。

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

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

示例:

在所有可见的 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>
演示: