苏飞论坛

标题: jQuery选择器-可见性学习详解 [打印本页]

作者: 范范 时间: 2018-3-7 21:03
标题: jQuery选择器-可见性学习详解
在页面上通常都会有很多隐藏的内容，批量找到隐藏的元素，并对其进行操作，此时主要使用的就是选择器中的可见性选择器主要有如下两个：
1. :hidden 匹配所有不可见元素，或者type为hidden的元素
2. :visible 匹配所有的可见元素

以下是具体的操作方法，会根据实例进行具体的剖析，具体如下：
1. :hidden
具体实例如下：
html代码：

[HTML] 纯文本查看 复制代码

<table>

  <tr style="display:none"><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("tr:hidden")

结果返回：

[HTML] 纯文本查看 复制代码

[ <tr style="display:none"><td>Value 1</td></tr> ]

此例子中，主要是获取所有的隐藏的tr元素

获取所有的type = ‘hidden’的元素：
点击查看详解

2. :visible
点击查看详解

作者: 范范 时间: 2018-3-7 21:03
2. :visible

实例详解如下：

html代码：

[HTML] 纯文本查看 复制代码

<table>

  <tr style="display:none"><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("tr:visible")

结果返回：

[HTML] 纯文本查看 复制代码

[ <tr><td>Value 2</td></tr> ]

以上内容可以看出，是获取所有可见的tr元素

作者: 范范 时间: 2018-3-7 21:12
：hidden 获取 type=‘hidden’的所有元素

实例如下：

html代码：

[HTML] 纯文本查看 复制代码

<form>

  <input type="text" name="email" />

  <input type="hidden" name="id" />

</form>

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("input:hidden")

返回结果：

[JavaScript] 纯文本查看 复制代码

[ <input type="hidden" name="id" /> ]

以上实例中可以看到，获取了所有type=‘hidden’元素，或者也可以叫获取隐藏的input元素

作者: 范范 时间: 2018-3-7 21:13
可见性：即隐藏可见元素的查询

作者: 站长苏飞 时间: 2018-3-7 21:15
我只是路过打酱油的。

欢迎光临苏飞论坛 (http://www.sufeinet.com/)