可见性过滤器

可见性过滤器根据元素的可见性和不可见性选择相应的元素。




筛选器名称
jQuery语法
解释
返回


: hidden
$（隐藏）
选择所有的不可见元素
集合元素


：可见
$（可见）
选择所有可见元素
集合元素








$（p：隐藏）。大小（P）； / /元素隐藏元素

$（p：可见）。大小（P）； / /元素显示元素



注意：隐藏筛选器通常包含CSS样式显示的元素：没有和输入表单类型=隐藏和可见性：隐藏。

样品

jQuery的可见性选择器是根据元素的可见和不可见状态选择对应元素的方法。有两个要点：可见的：可见的和不可见的：隐藏的。今天我们主要学习这两个选择器的使用。首先，看一个HTML结构，以便于使用这两个选择器：





藏起来！
藏起来！
藏起来！
藏起来！







它显示了元素。






CSS代码：



{。包
宽度：500px；
填料：10px；
保证金：20px汽车；
边境：1px solid # CCC；
}

包装{ div
宽度：70px；
身高：40px；
背景：# 0083c1；
保证金：5px；
浮：左
}

{跨度
显示块；
清除：左；
颜色：# 008000；
}

{。starthidden
显示：无；
}

{。startvisibilityhidden
可见性：隐藏；
}






初步的效果







让我们看看两个选择器的语法和用法规则以及它们所扮演的角色。

1。隐形选择符：：隐藏

选择器


$（隐藏）表示元素标签。



或




$（隐藏） /选择所有隐藏元素



描述：

E：隐藏表示隐藏E元素的选择，而隐藏表示所有未可见元素被选中。

返回值：

集合元素

实例uff1a


$（文档）Ready（函数（）{）
$（范围：第一）。文本（） $（）：隐藏
$（隐藏）。显示（3000）；显示所有隐藏的div元素
$（）：文本（+（输入：隐藏）+隐藏输入）；在结束标记结尾添加文本，显示隐藏输入的数量。
}）；



功能：

隐藏选择所有不可见元素。一些浏览器也包含了里面的所有标签，这里提到的隐形元素有两种样式，显示：没有类型和类型隐藏，它也是提醒，隐藏可以导致选择中的所有标签，所以建议在前面添加一个元素标签。

uff1a效应







两。可见性选择器：可见

Selector：


$（可见）指的是元素标签，选择指定的可见元素标签。



也许




$（可见）选择所有可见元素





描述：

e：可见意味着选择可见的E元素，例如$ （），这意味着选择所有可见的div元素，而$（可见）意味着选择所有可见元素。

返回值：

集合元素

实例uff1a



$（文档）Ready（函数（）{）
Click（函数（e））可见div元素绑定一个单击事件
$（Css）
（e.stoppropagation）； / /停止事件
}）；
$（）按钮（Click）（函数（e））按钮来绑定单击事件。
$（隐藏）。显示（）。Css（背景
（e.stoppropagation）； / /停止事件
}）；
}）；




功能：

第一段代码上面是点击后可见的div元素，元素将添加的那个红色边框样式。代码的第二部分是单击按钮显示所有隐藏元素并添加红色背景颜色。这里所指的可见元素就像我们前面隐藏的元素，只有显示不隐藏的元素：无或隐藏（）。

uff1a效应







最后，还有一点是：可见过滤掉所有可见的元素，但是这里的可见性是不被显示隐藏的元素：没有或隐藏（）函数；隐藏是所有隐藏元素的选择。同样的，这里所谓的隐藏不是可见性：隐藏，而是显示的表单元素：无或隐藏。

这里简要介绍了关于jQuery的可见性过滤器选择器，感兴趣的朋友可以在本地测试，这可以提高他们的理解力。