jQuery 的可见性过滤器是根据元素的可见和不可见状态来选择相对应的元素. jQuery 可见性过滤选择器有两个, 分别为::hidden(选取所有不可见元素),:visible(选取所有可见元素).
jQuery 的可见性过滤器
元素的可见状态有两种, 分别是隐藏状态和显示状态. 可见性过滤器就是利用元素的可见状态匹配元素的.
因此, 可见性过滤器也有两种, 一种是匹配所有可见元素的: visible 过滤器, 另一种是匹配所有不可见元素的: hidden 过滤器.
过滤器名 | jQuery 语法 | 说明 | 返回 |
:hidden | $(':hidden') | 选取所有不可见元素 | 集合元素 |
:visible | $(':visible') | 选取所有可见元素 | 集合元素 |
在应用: hidden 过滤器时, display 属性是 none 以及 input 元素的 type 属性为 hidden 的元素都会被匹配到.
示例: 获取页面上隐藏和显示的 input 元素的值
- <script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
- <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>
运行效果:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/16485.html