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
       点击查看详解

范范

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元素

范范

：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元素

范范

可见性： 即隐藏  可见元素的查询

站长苏飞

我只是路过打酱油的。