可见性过滤器
可见性过滤器根据元素的可见性和不可见性选择相应的元素。
筛选器名称
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的可见性过滤器选择器,感兴趣的朋友可以在
本地测试,这可以提高他们的理解力。