说明可见性过滤器选择器在jQuery中的使用

可见性过滤器可见性过滤器根据元素的可见性和不可见性来选择元素。名称jQuery语法描述返回：hidden $(':hidden ')选择所有不可见元素集元素： visible $ ('3360 visible ')选择所有可见元素集元素$('p:hidden)。size()；//元素p隐藏元素$('p:visible ')。size()；//元素p显示元素注意：hidden filter一般是一个CSS样式为display:none的元素，输入表单类型为type='hidden '，visibility:hidden。

示例jQuery的可见性选择器根据元素的可见和不可见状态选择相应的元素。主要有两种类型：可见：可见和不可见：隐藏。今天，我们将主要研究这两个选择器的使用。让我们首先看一个HTML结构，它便于学习这两个选择器的使用：

div class=' wrap ' span/span div/div style=' display : none ' Hider！/div div style=' visibility : hider '！/div div class=' startHidden ' hider！/div div class=' startvisibilityhidere ' hider！/div/div formin put type=' hidden '/input type=' hidden '/input type=' hidden '/form span/span button显示隐藏的元素/button/div。

CSS代码：

样式类型='text/css '。包装{ width: 500pxpadding: 10pxmargin: 20px自动；border: 1px固体# ccc} .包装div { width: 70px高度： 40px；背景# 0083C1margin: 5pxfloat : left } span { display : }块；clear:左侧；color: # 008000} .startHidden { display: none} .startVisibilityHidden { visibility :隐藏；}/样式

初步效果

让我们来看看这两个选择器及其角色的语法和使用规则。

一、隐身选择器：隐藏。

选择器

$('E:hidden') //E表示元素标记或。

$(':hidden') //选择所有隐藏的元素描述：

E:hidden表示选择隐藏的e元素，而：hidden表示选择所有不可见的元素。

返回值：

收集元素

示例：

$(文档)。ready(function(){ $(' span : first ')。文本('找到' $(':hidden '，document.body)。长度'隐藏元素总数');//向第一个span标记添加文本，以显示正文中隐藏了多少元素$('div:hidden ')。show(' 3000 ')；//显示所有隐藏的div元素$ ('span:last ')。文本('找到' $(' input 3360 hidden ')。长度“隐藏输入”)；//在最后一个span标记中添加文本，以显示隐藏了多少输入})；功能：

“:hidden”选择所有不可见的元素。有些浏览器还在标题中包含所有标签，这里提到的不可见元素是“display:none”和“type=‘hidden’”，但不包含“visibility:hidden”的隐藏元素。另外，提醒大家“:hidden”会导致表头所有标签，建议在它前面加一个元素标签。

效果：

二、可见性选择器：visible。

选择器：

$('E:visible') //E引用元素标记，选择指定的可见元素标记或。

$(':visible')//选择所有可见元素。

描述：

“E:visible”表示选择可见的e元素，例如，“$('div:visible ')”表示选择所有可见的div元素，而“$(':visible ')”表示选择所有可见的元素。

返回值：

收集元素

示例：

脚本类型=' text/JavaScript' $(文档)。ready (function () {$ ('DIV 3360可见')。click(函数(e) {//visible div元素绑定一个click事件$ (this)。CSS('边框'，' 2px纯红')；//在可见的DIV元素e.stopPropagation()中添加2px红色边框；//停止事件冒泡})；$(“按钮”)。click(function(e){//用click事件$ ('div : hidden ')绑定按钮。显示('快速')。CSS('背景'，'红色')；//显示隐藏元素，背景变为红色e . stopperpagation()；//停止事件冒泡})；});/script函数：

上面的第一个代码是当鼠标点击一个可见的DIV元素时，会添加2px红色边框样式，而第二个代码是点击按钮会显示所有隐藏的元素，背景颜色为红色。这里提到的可见元素和我们面前的隐藏元素是一样的，只是没有被“display:none”或“display”隐藏。hide()”。

效果：

最后一点：“:visible”过滤掉所有可见的元素，但这里的visible指的是未被“display:none”或“use”隐藏的元素。hide()”函数；“:隐藏”是选择所有隐藏的元素。同样，这里所谓的隐藏并不是指“可见性：隐藏”，而是指“display:none”或“type=‘hidden’”的表单元素。

这里简单介绍一下jQuery的可见性过滤器选择器。感兴趣的朋友可以在当地测试，这可能会增强他们的理解。