jquery可见性过滤选择器有哪些?

jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个:

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

可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 ()和 visible:hidden 之类的元素

先来看一个HTML结构,方便学习这两个选择器的使用:

  <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>

初步效果

1.png

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

不可见性选择器::hidden

$("E:hidden") //E表示元素标签
//或
$(":hidden") //选择所有隐藏元素

描述:

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

返回值:集合元素

实例:

$(document).ready(function(){
  //在第一个span标签中增加文本,显示body中有多少个元素隐藏
  $("span:first").text("Found " + $(":hidden",document.body).length + " hidden elements total.");

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

功能:

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

效果:

2.png

可见性选择器::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()”隐藏的元素。

效果:

3.png

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

Image placeholder
前端答疑
未设置
  83人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery基本过滤选择器有哪些?

jquery基本过滤选择器:1、first()或者:first选取第一个元素//选择第一个div元素 $('div:first') $('div').first()2、last()或者:last选取最

jquery内容过滤选择器有哪些?

:contains(text):empty:has(seletor):parent先写几个DOM元素的HTML结构:JohnResign GeorgeMartin MalcomJohnSinclair

jquery表单选择器有哪些?

jquery表单选择器有哪些?jquery虽然可以使用常规选择器来对表单的元素进行定位,但有时还是不能满足开发者灵活多变的需求。所以,jQuery为表单提供了专用的选择器。:input:选取所有inp

jquery表单过滤器有哪些?

jquery表单过滤器有哪些?jQuery提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过滤。:enabled:选取所有可用元素:disabled:选取所有不可用元素:check

css常见选择器有哪些?优先级是什么?

选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、通配符选择器。1、标签选择器标签选择器,也称为元素选择器。标签选择器的基

css属性选择器有哪些?

css属性选择器有哪些?[attribute]用于选取带有指定属性的元素。该选择器选择包含attribute属性的所有元素,不论attribute的值为何。[attribute=value]用于选取带

jquery中有哪几种类型的选择器?

jQuery选择器一、基本选择器基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。1、ID选择器#id描述:根据给定的id匹配一个元素,返回单

jQuery遍历方法有哪些?

jQuery遍历方法有哪些?jquery遍历方法有对象遍历和函数调用两种方式。一、jQuery对象遍历语法:$(集合).each(function(index,item){ //index索引 //i

基于jquery开发的UI框架有哪些?

基于jquery开发的UI框架有哪些?1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源

jquery可以做什么?

jquery可以做什么?jQuery本身是一个基于插件的JavaScript库,它的各种功能可以通过新的插件进行增强。jQuery为Web编程提供了一个抽象的层,使得它可以兼容于任何浏览器,并且大大简

jQuery选择器的的优点是什么

jQuery选择器的的优点1、简洁的写法,说道简洁的写法,给大家列举一下例子,看看jQ和原生哪个更方便。。2、提供了完善的处理机制(完善的兼容处理)3、jQuery选择器判断dom节点存在的方法:4、

jquery有几种选择器?

jquery有几种选择器?很多种,大概归纳为9种。1、基本的有id、标签、类、通配符选择器:#id element .class *2、层次选择器:ancestordescendant parent>

jquery有哪四种表单过滤器?

jQuery提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过滤。名称说明解释:enabled匹配所有可用元素查找所有可用的input元素:$("input:enabled"):d

jquery有哪些常用事件?

jquery有哪些常用事件?1、$(document).ready()$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和

有哪些常用jQuery UI框架?

jqueryUI框架1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源框架.设计目标是简

vue加载优化策略有哪些?

方法一路由懒加载vue.js是一个比较流行的前端框架,与react.js、angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手。但是单页面应用也都有其弊病,有时候首屏

vue前端UI框架有哪些?

Vue移动端UI框架1、Vux(star:15620)VUX(读音[v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。暂未适配vue-cli@3

基于vue移动端UI框架有哪些?

vuxVUX(读音[v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。文档地址:https://doc.vux.li/zh-CN/演示地址:ht

数据科学领域的核心技能和新兴技能分别有哪些?

近年来随着大数据的迅速发展,各种各样的数据分析技能也逐渐大热,为了找到数据科学领域目前最常用的技能和未来最流行的应用趋势,我们进行了一项调查。我们确定了数据科学技能的两个主要类别:一个是大多数受访者拥

前端开发人员最困扰的事情有哪些?

前端和后端开发之间的界线正在发生变化。有一些常见的错误会导致前端开发人员增加工作量、浪费时间,本文将介绍一些常见的错误以及如何避免这些错误。公司向他们的开发人员和程序员提出更多的要求,让他们完成与自己

调查:2019年数据分析市场面临的挑战有哪些?

分析和数据科学行业对人才的需求急剧增长,为该行业求职者提供了很多工作机会。无论是500强还是初创企业,每个团队都在使用分析来从数据中获得有价值的信息。然而,在人才、客户定位和收集数据等方面,这个行业仍

ie加载不出css样式的原因有哪些?

ie加载不出css样式的原因有哪些?可能的原因如下:1.HTML页面编码与CSS编码不同(如HTML为gbk,CSS为utf-8);2.CSS文件中未指定@charset头声明,导致IE默认使用页面编

css中变换属性有哪些?

css中变换属性有哪些?1、matrixmatrix(,,,,,)以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵2、tra

HTML内联元素有哪些?

内联元素(inlineelement)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、

智慧城市带来的网络威胁有哪些?

如今,中国城市正在疾步向前拥抱智慧时代,我国是全球智慧城市建设最为积极的国家之一。近年来,智慧城市建设步入快车道时代!据不完全统计,中国智慧城市的发展数量已经超过500个,居世界之最。然而,智慧城市给