:visible Selector

visible selector

version added: 1.0jQuery(':visible')

描述: 选择所有可见的元素。

元素可以被认为是隐藏的几个原因:

  • 他们的CSS display值是none
  • 他们是type="hidden"的表单元素。
  • 它们的宽度和高度都显式设置为0。
  • 一个祖先元素是隐藏的,因此该元素是不会在页面上显示。

元素visibility: hiddenopacity: 0被认为是可见的,因为他们仍然占有布局空间。在动画,隐藏一个元素,该元素被认为是直到动画结束可见。

在jQuery 1.3.2中,如何判断:hidden做了修改。如果他或者其任何父级元素占有布局空间,这个元素就被认为是隐藏的。CSS的能见度属性(visibility)不考虑(因此$(elem).css('visibility','hidden').is(':hidden') == false )。更详细的大纲的变化:release notes

Example:

Make all visible divs turn yellow on click.

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

Demo:

jQuery 1.6 API 中文版脚本之家整理、修订 (2011年6月)