Jquery选择器(五) -- Visibility Filters

最新推荐文章于 2018-11-19 22:42:29 发布

原创最新推荐文章于 2018-11-19 22:42:29 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #ViewUI

jQuery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了jQuery中的可见性过滤器,包括:hidden和:visible的选择器使用方法。通过示例展示了如何选择并操作隐藏和可见的元素。

可见性过滤器

[1] :hidden      Returns: Array<Element(s)>
      说明：匹配所有的隐藏元素。在jQuery 1.3.2中，隐藏元素的计算方式有所改变。假设一个元素是不可见的，那么它或者它的父节点在文档流中不占用任何空间。css visibility属性设置的元素不考虑在内。(虽然visibility属性可以让元素不可见，但元素在文档流中还是占有空间的)

Js代码

$("span:first").text("Found " + $(":hidden", document.body).length +
" hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

$("span:first").text("Found " + $(":hidden", document.body).length + 
         " hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

[2] :visible      Returns: Array<Element(s)>
      说明：匹配所有的可见元素。在jQuery 1.3.2中，可见元素的计算方式有所改变。假设一个元素是可见的，那么它或者它的父节点在文档流中占用空间。css visibility属性设置的元素不考虑在内(即使   visibility: hidden;   该元素也认为是可见的)。

Js代码

$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});

$("div:visible").click(function () {
   $(this).css("background", "yellow");
});
$("button").click(function () {
   $("div:hidden").show("fast");
});