本文实例讲述了jQuery中可见性过滤器简单用法。分享给大家供大家参考，具体如下：
一 介绍
元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此，可见性过滤器也有两种，一种是匹配所有可见元素的:visible过滤器，另一种是匹配所有不可见元素的:hidden过滤器。
在应用:hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素都会被匹配到。
二 应用
获取页面上隐藏和显示的input元素的值
三 代码
<script language="javascript" src="JS/jquery-3.
在jQuery库中，可见性过滤器是用于筛选DOM树中基于元素是否可见的特定部分的工具。这些过滤器，`:visible` 和 `:hidden`，是jQuery选择器的一部分，允许开发者方便地操作显示或隐藏的元素。下面我们将深入探讨这两个过滤器的工作原理，以及如何在实际应用中使用它们。
一、介绍
在HTML中，元素的可见性状态可以通过CSS的`display`属性来控制。当`display`属性设置为`none`时，元素被视为隐藏；反之，如果`display`属性不是`none`（默认值通常是`block`、`inline`等），则元素被认为是可见的。此外，对于`<input>`元素，当`type`属性设为`hidden`时，元素也会被认为是隐藏的，即使它在HTML源代码中存在。
1. `:visible` 过滤器：这个过滤器用于选取所有在当前布局中可见的元素，包括那些`display`属性不是`none`并且非`hidden`类型的`<input>`元素。这意味着，即使元素的宽度和高度为0，或者通过CSS其他方式设置为不可见，只要它们在页面布局中占用空间，`:visible`就会选取它们。
2. `:hidden` 过滤器：相反，`:hidden`选择器会选取所有`display`属性为`none`，或者`<input>`元素的`type`属性为`hidden`的元素。这涵盖了所有在视觉上不可见的元素。
二、应用
在实际开发中，可见性过滤器可以用于多种场景，例如：
1. 获取页面上所有显示或隐藏的元素：这可以帮助我们动态地处理用户界面，例如，收集所有可见的输入字段的值，或者隐藏特定的元素集合。
2. 动态显示和隐藏元素：结合`.show()`和`.hide()`方法，我们可以根据条件显示或隐藏匹配的元素，例如响应用户的交互或数据变化。
3. 表单验证：在表单提交之前，可以使用`:visible`和`:hidden`过滤器检查所有可见的必填字段是否已填写，确保用户已完成了必要的输入。
三、代码示例
以下代码片段展示了如何使用`:visible`和`:hidden`过滤器获取页面上不同类型的输入元素的值：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery 可见性过滤器示例</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<input type="text" value="显示的input元素">
<input type="text" value="我是不显示的input元素" style="display:none">
<input type="hidden" value="我是隐藏域">
<script type="text/javascript">
$(document).ready(function() {
var visibleVal = $("input:visible").val(); // 取得显示的input的值
var hiddenVal1 = $("input:hidden:eq(0)").val(); // 取得第一个隐藏的input的值
var hiddenVal2 = $("input:hidden:eq(1)").val(); // 取得第二个隐藏的input的值
alert(visibleVal + "\n\r" + hiddenVal1 + "\n\r" + hiddenVal2); // 弹出取得的信息
});
</script>
</body>
</html>
```
在这个例子中，我们首先引入了jQuery库，然后创建了三个`<input>`元素：一个显示的文本输入，一个通过CSS隐藏的文本输入，和一个`hidden`类型的隐藏域。在文档加载完成后，我们使用jQuery选择器选取可见的`<input>`元素的值，以及两个隐藏的`<input>`元素的值，并将结果弹出到警告框中。
四、运行效果
运行这段代码，你会看到一个警告框弹出，依次显示了可见输入字段的值、第一个隐藏的`<input>`元素的值（即使它被CSS隐藏）和隐藏域的值。这演示了如何利用可见性过滤器来访问和操作页面上的元素。
总结
jQuery的可见性过滤器`:visible`和`:hidden`是强大的工具，能够帮助开发者高效地处理页面上元素的可见性。理解并熟练运用这两个过滤器，可以增强你的JavaScript和jQuery编程能力，使你在处理动态UI时更加游刃有余。无论是用于获取用户输入、执行验证还是调整页面布局，`:visible`和`:hidden`都是不可或缺的选择器。
