Jquery选择器(五) -- Visibility Filters-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_4497/article/details/81861354

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可见性过滤器

[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");
});