jQuery可见性过滤选择器

:hidden Selector

选择所有被隐藏的元素

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

1.CSS的display为none的元素

2.表单中type=“hidden”的元素

3.width和height被明确设置为0

4.祖先节点元素是hidden，因此这些元素也不会在页面显示

元素有visibility:hidden 或者opacity:0被认为是可见的，因为他们仍然占据着布局的空间。通过动画（这也是我们下面要将的jQuery的使用）隐藏一个元素，这个元素直到动画结束时，才能被认为是可见的。在动画中展现一个元素，这个元素从动画开始就被认为是可见的。

HOW：hidden什么时候是被隐藏的判断被在jQuery1.3.2中修改。一个元素会被隐藏，如果它或它的祖先在文档中不占据空间。CSS 中的visibility没有被考虑（因此$(elem).css('visibility','hidden').is(':hidden') == false).发行版本里会指出更多的细节。




附加：因为:hidden是jQuery的扩展，不是CSS规范的一部分，查询的时候使用:hidden就不能够很好的利用本地DOM提供的querySelectorAll()方法。为了更好的使用:hidden来选择元素，首先选择元素使用纯粹的CSS选择器，然后再使用.filter(":hidde").

:visible Selector

选择所有可见的元素

在文档中占据空间的元素会被认为是可见的，可见的元素的width和height的值大于0。

visible的使用注意事项同上附加类似！


<script>
//选择所有的hidden元素，并给hidden的 input元素计数
// 在一些浏览器中 :hidden包括 head, title, script等等
var hiddenEls = $("body").find(":hidden").not("script");
$("span:first").text("Found " + hiddenEls.length + " hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
</script>

<script>
//让所有的可见div元素单击时改变成yellow颜色
 $("div:visible").click(function () {
      $(this).css("background", "yellow");
    });
    $("button").click(function () {
      $("div:hidden").show("fast");
    });
</script>