当前位置:Gxlcms > JavaScript > 举例讲解jQuery中可见性过滤选择器的使用_jquery

举例讲解jQuery中可见性过滤选择器的使用_jquery

时间:2021-07-01 10:21:17 帮助过:22人阅读

可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素。
过滤器名 jQuery 语法 说明 返回
:hidden $(':hidden') 选取所有不可见元素 集合元素
:visible $(':visible') 选取所有可见元素 集合元素

注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none、input 表单类型为type="hidden"和visibility:hidden 的元素。

示例
jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个:可见:visible和不可见:hidden。今天我们主要来学习这两个选择器的使用。先来看一个HTML结构,方便学习这两个选择器的使用:

Hider!
Hider!
Hider!
Hider!

CSS Code:


初步效果

2016418170550312.png (537×112)

下面我们分别来看看这两个选择器的语法和使用规则以及所起的作用

一、不可见性选择器::hidden

选择器


描述:

E:hidden表示选择隐藏的E元素,而:hidden表示选取所有不可见的元素

返回值:

集合元素

实例:

功能:

":hidden"选取所有不可见的元素,有的浏览器还包含了

内所有标签,而且这里所指的不可见元素是样式为“display:none”和表单“type="hidden"”两种,而不包含“visibility:hidden”的隐藏元素。另外提醒大家,“:hidden”有的会导致选择中
内所有标签,所以建议前面加个元素标签。

效果:

2016418170632545.png (529×142)

二、可见性选择器::visible

选择器:

或者

描述:

“E:visible”表示选择可见的E元素,比如说“$("div:visible")”表示选择所有可见的div元素,而“$(":visible")”表示选择所有可见元素

返回值:

集合元素

实例:

功能:

上面第一段代码是鼠标单击可见的DIV元素后,该元素会增加一个2px红色边框的样式,而第二段代码是单击按钮会显示所有隐藏的元素,并加上红色背景色。这里所指的可见元素和我们前面隐藏元素一样,只是没有被“display:none”或“.hide()”隐藏的元素。

效果:

2016418170706043.png (533×110)

最后再说一点:“:visible”过滤出所有可见元素,但是这里的可见是指没有被“display:none”或者使用“.hide()“函数隐藏的元素;”:hidden“是选择所有隐藏元素。同样,这里所谓隐藏,不是指”visibility:hidden“,而是指”display:none“或”type="hidden"“的form元素。

有关于jQuery的可见性过滤选择器就简单介绍到这里了,感兴趣的朋友可以在本地测试一下,这样可能加强对他们的理解。

人气教程排行