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实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery弹框插件使用方法详解
May 26 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性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP循环结构实例讲解
2014/02/10 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python调用飞书发送消息的示例
2020/11/10 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
财会自我鉴定范文
2013/12/27 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
2016年春节问候语
2015/11/11 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
MongoDB支持的索引类型
2022/04/11 MongoDB