jQuery判断一个元素的可见性

比特踏风鹤
• 阅读 4653

jQuery可以通过以下的方式来选择隐藏的元素:

jQeury(":hidden")

元素一旦满足下面几个情况,将会给视为隐藏:

  • 他们的CSS display值是none
  • 他们是type="hidden"的表单。
  • 他们的宽度和高度都显示的设置为0。
  • 一个祖元素是隐藏的或者不占据布局空间,那么此元素被认为是隐藏的的。

元素visibility: hiddenopacity: 0被认为是可见的,因为他们仍然占据布局空间。在动画,隐藏一个元素,该元素被认为是可见的直到动画结束。

因为 :hidden() 是一个 jQuery 延伸出来的一个选择器。 并且不是的CSS规范的一部分, 使用:hidden()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用.filter(":hidden")代替。


选择所有可见的元素:

jQuery(":visible")

如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度,是大于零。

元素的visibility: hiddenopacity: 0被认为是可见的,因为他们仍然占用空间布局。

不在文档中的元素是被认为隐藏的;jQuery没有办法知道他们是否是可见的,因为元素可见性依赖于适用的样式。

所以 option 元素是被认为是隐藏的, 不管他们是否selected(选中)状态.

隐藏元素上做动画,元素被认为是可见的,直到动画结束。显示元素上做动画,在动画的开始处该元素被认为是可见的。

点赞
收藏
评论区
推荐文章
Stella981 Stella981
3年前
Js和Thymeleaf如何获取model中的值
简述在大多数的项目架构中,使用SPringBoot发布微服务,前端采用Thymeleaf作为Html模版,使用Jquery作为动态脚本,那么Thymeleaf和Jquery是如何获取Model中的数据呢?Jquery获取Model中的数据方法1:将model中的值赋给hidden,然后Js获取隐藏域的值。
Stella981 Stella981
3年前
Selenium Webdriver——操作隐藏的元素
作者何坤158109016@qq.com(https://www.oschina.net/action/GoToLink?urlmailto%3A158109016%40qq.com) V2.02017/3/26.更多内容请到:www.snappydata.top(https://www.oschina.net/action/GoToLin
Wesley13 Wesley13
3年前
PHP 调用qq邮箱接口
html代码<!DOCTYPEhtml<html<head<metacharset"UTF8"<title</title<scriptsrc"https://code.jquery.com/jquery1.9.1.min.js"</script
Stella981 Stella981
3年前
Jquery创建表格、填充表格数据、重置表格
1.Jquery创建表格/创建表格@paramlabel标题@paramdata数据@paramtableElementhtml元素,表格插入至此元素中/functioncreateTable(label,data,tableElemen
Stella981 Stella981
3年前
Jquery元素追加和删除
介绍  DOM是DocumentObjectModeule的缩写,一般来说,DOM操作分成3个方面。1、DOMCore   DOMCore并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML。   例如:
Wesley13 Wesley13
3年前
JQ面试问题(转载)
1你在公司是怎么用jquery的?答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答)你用过的选择器啊,动画啊,表单啊,ajax事件等配置Jquery环境下载jquery类库在jsp页面引用jquery类库即可<scripttype"text/javascript"src"jquery/jquery1.7.2
Stella981 Stella981
3年前
JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value:1\.$("select\_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发2\.varcheckText$("select\_id").find("option:selected").text();  
Stella981 Stella981
3年前
Jerry的UI5框架代码自学教程
SAPUI5对View元素基于jQuery的操作方式,使得其学习曲线相对Angular/React来说比较平缓,至少对于我个人而言是这样。对于已经有jQuery经验的前端开发人员来说很容易上手。!(https://static.oschina.net/uploads/img/201801/21211708_SfQW.png)使用UI5开发SA
Stella981 Stella981
3年前
Seleinum_CSS定位方式
转载:https://www.cnblogs.com/longronglang/p/9144661.htmlCSS选择器:常见符号:表示id选择器.表示class选择器\表示子元素,层级一个空格也表示子元素,但是是所有的后代子元素,相当于xpath中的相对路径一、css:属性定
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Wesley13 Wesley13
3年前
DOM元素的自动隐藏
在一些有悬浮元素的场景中,比如点击一个按钮弹出菜单后,点击菜单以外的地方,菜单应该被隐藏起来。隐藏的方式最好是自动隐藏,或至少是组件内的自动隐藏。蒙层比如,一个模态框组件(闭包实现)点击蒙层时,响应蒙层的点击事件,可以在事件处理函数中隐藏整个组件。在Vue和React等框架的组件中,这一点非常容易实现。<divclass"com
比特踏风鹤
比特踏风鹤
Lv1
千呼万唤始出来,犹抱琵琶半遮面。
文章
7
粉丝
0
获赞
0