举例讲解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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
js中的json对象详细介绍
Oct 29 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
video.js使用改变ui过程
Mar 05 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
vue实现简易计算器功能
2021/01/20 Vue.js
简单谈谈Python中函数的可变参数
2016/09/02 Python
python正则表达式re之compile函数解析
2017/10/25 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Django的性能优化实现解析
2019/07/30 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
详解Anaconda 的安装教程
2020/09/23 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
企业党员公开承诺书
2014/03/26 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
合同审查法律意见书
2015/06/04 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL