: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>