jQuery :visible和:hidden可见性过滤器的用法（附带实例）

元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态来匹配元素的。

jQuery 中的可见性过滤器有两种：

一种是匹配所有显示元素的 :visible 过滤器；
另一种是匹配所有隐藏元素的 :hidden 过滤器。

在使用 :hidden 过滤器时，display 属性为 none 的元素以及 type 属性为 hidden 的 <input> 元素都会被匹配到。

【实例】获取页面中隐藏和显示的 <input> 元素的值。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加 3 个 <input> 元素，其中第 1 个为显示的文本框，第 2 个为隐藏的文本框，第 3 个为隐藏域。关键代码如下：

<input type="text" value="我是显示的文本框">
<input type="text" value="我是隐藏的文本框" style="display:none">
<input type="hidden" value="我是隐藏域">

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，获取页面中隐藏和显示的 <input> 元素的值。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    var visibleVal = $("input:visible").val(); // 获取显示的文本框的值
    var hiddenVal1 = $("input:hidden:eq(0)").val(); // 获取隐藏的文本框的值
    var hiddenVal2 = $("input:hidden:eq(1)").val(); // 获取隐藏域的值
    alert(visibleVal+"\n"+hiddenVal1+"\n"+hiddenVal2); // 输出获取得的信息
});
</script>

运行本实例将显示下图所示的效果：

图 1 弹出隐藏和显示的<input>元素的值

jQuery :visible和:hidden可见性过滤器的用法（附带实例）

相关文章