举例讲解jQuery中可见性过滤选择器的使用


Posted in Javascript onApril 18, 2016

可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素。

过滤器名 jQuery 语法 说明 返回
:hidden  $(':hidden')  选取所有不可见元素 集合元素
:visible  $(':visible')  选取所有可见元素 集合元素

$('p:hidden).size(); //元素p 隐藏的元素 

$('p:visible').size(); //元素p 显示的元素

注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none、input 表单类型为type="hidden"和visibility:hidden 的元素。

示例
jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个:可见:visible和不可见:hidden。今天我们主要来学习这两个选择器的使用。先来看一个HTML结构,方便学习这两个选择器的使用:

<div class="wrap">
 <span></span>
 <div></div>
 <div style="display:none">Hider!</div>
 <div style="visibility:hidden">Hider!</div>
 <div class="startHidden">Hider!</div>
 <div class="startVisibilityHidden">Hider!</div>
 <div></div>
 <form>
  <input type="hidden" />
  <input type="hidden" />
  <input type="hidden" />
 </form>
 <span></span>
 <button>显示隐然元素</button>
</div>

 

CSS Code:

<style type="text/css">
 .wrap {
   width: 500px;
   padding: 10px;
   margin: 20px auto;
   border: 1px solid #ccc;
 }
  
 .wrap div {
  width: 70px;
  height: 40px;
  background: #0083C1;
  margin: 5px;
  float: left
 }
 
 span {
  display: block;
  clear: left;
  color: #008000;
 }
 
 .startHidden {
  display: none;
 }
 
 .startVisibilityHidden {
  visibility: hidden;
 }
</style>

 

初步效果

举例讲解jQuery中可见性过滤选择器的使用

下面我们分别来看看这两个选择器的语法和使用规则以及所起的作用

一、不可见性选择器::hidden

选择器

$("E:hidden") //E表示元素标签

  或

$(":hidden") //选择所有隐藏元素

描述:

E:hidden表示选择隐藏的E元素,而:hidden表示选取所有不可见的元素

返回值:

集合元素

实例:

$(document).ready(function(){
 $("span:first").text("Found " + $(":hidden",document.body).length + " hidden elements total.");//在第一个span标签中增加文本,显示body中有多少个元素隐藏
 $("div:hidden").show("3000");//显示所有隐藏的div元素
 $("span:last").text("Found " + $("input:hidden").length + " hidden inputs");//在最后一个span标签中增加文本,显示有多少input隐藏
});

功能:

":hidden"选取所有不可见的元素,有的浏览器还包含了<header>内所有标签,而且这里所指的不可见元素是样式为“display:none”和表单“type="hidden"”两种,而不包含“visibility:hidden”的隐藏元素。另外提醒大家,“:hidden”有的会导致选择中<header>内所有标签,所以建议前面加个元素标签。

效果:

举例讲解jQuery中可见性过滤选择器的使用

二、可见性选择器::visible

选择器:

$("E:visible") //E是指元素标签,选择指定的可见元素标签

  或者

$(":visible")//选择所有可见元素

 

描述:

“E:visible”表示选择可见的E元素,比如说“$("div:visible")”表示选择所有可见的div元素,而“$(":visible")”表示选择所有可见元素

返回值:

集合元素

实例:

<script type="text/javascript">
 $(document).ready(function(){
   $("div:visible").click(function(e){ //可见DIV元素绑定一个单击事件
 $(this).css("border","2px solid red"); //给可见的DIV元素增加一个2px的红色边框
 e.stopPropagation();//停止事件冒泡
   });
   $("button").click(function(e){ //给button绑定一个单击事件
 $("div:hidden").show("fast").css("background","red");//隐然的元素显示出来,并把背景变成红色
 e.stopPropagation();//停止事件冒泡
 });
  });
</script>

功能:

上面第一段代码是鼠标单击可见的DIV元素后,该元素会增加一个2px红色边框的样式,而第二段代码是单击按钮会显示所有隐藏的元素,并加上红色背景色。这里所指的可见元素和我们前面隐藏元素一样,只是没有被“display:none”或“.hide()”隐藏的元素。

效果:

举例讲解jQuery中可见性过滤选择器的使用

最后再说一点:“:visible”过滤出所有可见元素,但是这里的可见是指没有被“display:none”或者使用“.hide()“函数隐藏的元素;”:hidden“是选择所有隐藏元素。同样,这里所谓隐藏,不是指”visibility:hidden“,而是指”display:none“或”type="hidden"“的form元素。

有关于jQuery的可见性过滤选择器就简单介绍到这里了,感兴趣的朋友可以在本地测试一下,这样可能加强对他们的理解。

Javascript 相关文章推荐
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 #Javascript
jQuery的内容过滤选择器学习教程
Apr 18 #Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 #Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 #Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 #Javascript
AngularJS入门教程之AngularJS模型
Apr 18 #Javascript
AngularJS入门教程之AngularJS指令
Apr 18 #Javascript
You might like
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
javascript动态加载二
2012/08/22 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python中集合类型(set)学习小结
2015/01/28 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python列表的增删改查实例代码
2018/01/30 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python切片工具pillow用法示例
2018/03/30 Python
Django如何将URL映射到视图
2019/07/29 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
Python的collections模块真的很好用
2021/03/01 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
会计求职信范文
2014/05/24 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
解除劳动合同证明书
2014/09/26 职场文书
公司租房协议书范本
2014/10/08 职场文书
法定授权委托证明书
2015/06/18 职场文书