jQuery中可见性过滤器简单用法示例


Posted in jQuery onMarch 31, 2018

本文实例讲述了jQuery中可见性过滤器简单用法。分享给大家供大家参考,具体如下:

一 介绍

元素的可见状态有两种,分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此,可见性过滤器也有两种,一种是匹配所有可见元素的:visible过滤器,另一种是匹配所有不可见元素的:hidden过滤器。

在应用: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>

四 运行效果

jQuery中可见性过滤器简单用法示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
基于jquery实现五星好评
Nov 18 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 #jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
header导出Excel应用示例
2014/01/24 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
srcElement表格样式
2006/09/03 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python中的__slots__使用示例
2015/02/26 Python
在Python中使用元类的教程
2015/04/28 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python如何将多个PDF进行合并
2019/08/13 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
财务会计自荐信范文
2014/02/21 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
十佳青年事迹材料
2014/08/21 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
签字仪式主持词
2015/07/03 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
小学四年级作文之写景
2019/08/23 职场文书
python实现的web监控系统
2021/04/27 Python
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
Python OpenCV实现图像模板匹配详解
2022/04/07 Python