【记】jQuery中的选择器:visible对visibility:hidden的处理

  首先先介绍visibility这个CSS属性。

  visibility用于表示该元素是否显示,其取值有:

  1.   visible:设置对象可视。
  2.   hidden:设置对象隐藏。
  3.   collapse:主要用来隐藏表格的行或列,隐藏的行或列能够被其他内容是用。

  这里需要说明的是,collapse在IE6及更早的浏览器不支持,它的作用只在表格中生效,对于其他的对象,等同于display:hidden。

  介绍到这里,也许我们会有个疑问,那就是visibility:hidden与display:none有什么区别呢?他们的不同之处就是隐藏的对象是否占据位置。visibility:hidden在对象隐藏之后,它所占据的地方并不被其他元素占据。就好比一个人穿着隐身衣一样,虽然我们看不见他,但是他实际还在那里,我们仍然能摸到他,他所站的位置也不能放别的东西。但是,display:none就真的消失了,这个人就真的不存在了。因此,如果我们需要将一个容器隐藏,但是又不想让它后面的内容占据他的位置,那么visibility:hidden就派上用场了。(其实关于visibility:hidden与display:none的区别在于,前者在浏览器解析完DOM树之后,将这个容器放入渲染树进行计算和显示。而后者在生成DOM树,不会放到渲染树中进行计算和绘图)

  那么现在就有一个问题,就是如果一个元素是通过visibility:hidden隐藏了,那么我们如何通过jquery的选择器选择到它呢?我们显而易见的会想到:visible。这个语法是选择到可见的元素,再通过取反就可以了,因此,下面的代码可能是你想到的最简单的例子:

<script type="text/javascript">
$(function(){alert($('div:not(:visible)').length);
});
</script>
<body>
<div id="a" style="width:100px; height:100px; visibility:hidden;">11</div>
</body>

但是实际上,alert的结果是:0,也就是说,查找不可见的div没有找到。为什么会是这样呢?其实,原因是jQuery判断visible的逻辑和我们想象中的逻辑不同,我们认为这个不可见是眼睛看不到的。而jQuery的逻辑不是这样的,jquery的判断逻辑是:这个对象的offsetWidth和offsetHeight都为0才是不可见。而visibility:hidden的对象元素这两个值都是不为0的。从这看来,选择器这样写,是无法选择到这个div的。(其实这个理解起来也不难,虽然里面的内容看不到了,但是它还在这里啊,还占据着位置啊,所以必然不是不可见的)

  在jQuery的早些版本(1.3之前),上述代码是可以选择到这个div的,因为那个时候,visible的逻辑和我们想的一样,即:除了display:none和visibility:hidden之外,其他都为true。它之所以做了这个修改,很大的原因是效率问题。我们可以在官方的doc上找到原文:

  • In jQuery 1.3.1 (and older) an element was visible if its CSS "display" was not "none", its CSS "visibility" was not "hidden", and its type (if it was an input) was not "hidden".
  • In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

详情可以参考全文:http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled

  根据上面的原理,我们其实可以做一个小小的修改,如果我们把div的样式改成:width:0; height:0;去掉visibility:hidden,我们刷新下看看,alert弹出了1,也就是说,它仍然能找到这个div,与display:none与visibility:hidden无关了,而且div中的“11”还显示在页面上呢,但是,jquery认为它是不可见的。

  说了这么多,那么解决办法呢,既然visible的判断的逻辑已经和我们想象的有偏差,那么我们可以通过重新将老版本的jquery逻辑添加进来。方法有很多,我这里给出一个用filter方法实现的代码:

$('div').filter(function(){return ($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
});

上面的代码就可以实现visibility:hidden的选择了。当然,如果我们常用这个方法的话,可以把它封装一下。

 

 

 

转载于:https://www.cnblogs.com/echoloyuk/archive/2013/03/20/2971440.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360888.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React - antd4 中在form中为Switch赋值无效

项目场景&#xff1a; React - antd4; From表单 问题描述&#xff1a; Switch赋初始值无效 # 解决方案&#xff1a; let newCheck {};if (propsForm.type switch) {newCheck {...newCheck,valuePropName: "checked"}}<Form.Itemkey{propsForm.id}name{propsF…

在实践中重试HTTP标头

Retry-After是鲜为人知的HTTP响应标头。 让我引用RFC 2616&#xff08;HTTP 1.1规范&#xff09;的相关部分&#xff1a; 14.37重试后 Retry-After响应标头字段可与503 &#xff08; 服务不可用 &#xff09;响应一起使用&#xff0c;以指示请求该客户端的服务预计无法使用多…

Java中连接字符串的最佳方法

最近有人问我这个问题–在Java中使用运算符连接字符串是否对性能不利&#xff1f; 这让我开始思考Java中连接字符串的不同方法&#xff0c;以及它们如何相互对抗。 这些是我要研究的方法&#xff1a; 使用运算符 使用StringBuilder 使用StringBuffer 使用String.concat() …

时间转换以及公式

moment(item.updatedAt).fromNow() ;//距离今天多久了moment&#xff08;&#xff09;获得今天、明天和昨天的日期 let today moment(new Date());let tomorrow moment(new Date()).add(1,days);let yesterday moment(new Date()).add(-1, days);后续遇到继续补充

只不过是R.java文件的特性-----出错信息:R.java was modified manually! Reverting to generated version!...

出错信息:R.java was modified manually! Reverting to generated version! 出错原因&#xff1a;今天在res下建立了一个drawable的文件夹存放图片资源----图片名为1.jpg 后来R.java文件就报错了&#xff1a;R.java was modified manually! Reverting to generated version! 看…

十大最常见的Java性能问题

Java性能是所有Java应用程序开发人员都关心的问题&#xff0c;因为快速使应用程序与使其正常运行同等重要。 史蒂文海恩斯&#xff08;Steven Haines&#xff09;使用他在Java性能问题上的个人经验得出的结论是&#xff0c; 大多数问题都有共同的根本原因 。 因此&#xff0c;作…

antd form 初始化时间

initialValue: moment(record.showTime, YYYY-MM-DD HH:mm:ss)

uni-app 组件中的canvas转化为图片报错:errMsg:“canvasToTempFilePath:fail canvas is empty”

项目场景&#xff1a; uni-app,开发微信小程序 使用&#xff1a; wx.canvasToTempFilePath({canvasId: line,success: function(res) {console.log(canvasToImg, res);this.radarImg res.tempFilePath;},fail: function(res) {console.log(res);}});问题描述&#xff1a; ec…

正确获取Java事件通知

实现观察者模式以提供Java事件通知似乎是一件容易的事。 但是&#xff0c;容易陷入一些陷阱。 这是我在各种场合不慎造成的常见错误的解释…… Java事件通知 让我们从一个简单的bean StateHolder开始&#xff0c;它封装了带有适当访问器的私有int字段state &#xff1a; publ…

使用fn函数控制页面显示内容

在使用&#xff25;&#xff2c;的时候&#xff0c;不可避免的遇到&#xff0c;截取字符串&#xff0c;判断字符串长度等情况。这里给出简单的通过&#xff46;&#xff4e;函数操作字符串的deamon。 1、页面引入标签 <% taglib prefix"c" uri"http://java.s…

uni-app微信获取手机号,第一次解密总是失败

项目场景&#xff1a; uni-app; 获取code&#xff0c;后台解密手机号 问题描述&#xff1a; 每次第一次登陆&#xff0c;后台都会解密失败 原因分析&#xff1a; code获取错误&#xff1b;导致后台的解密key与code不对应 解决方案&#xff1a; 小程序获取手机号之前&#xf…

Java中不一致的操作会扩大规则

总览 当您在Java中执行一元或二进制操作时&#xff0c;标准行为是使用最宽的操作数&#xff08;或对byte &#xff0c; short和char使用更宽的操作数&#xff09;。 这很容易理解&#xff0c;但是如果考虑最佳类型可能会造成混淆。 乘法 当执行乘法运算时&#xff0c;您得到的…

圣诞节到了,用js给喜欢的人写一颗圣诞树吧

文章目录 1、效果预览2、代码2.1、定义数组写下祝福语2.2、模拟雪花落下的效果2.3、设置背景粒子2.4、操作动画效果2.5、定义闪烁效果2.6、定义粒子对象2.7、粒子对象播放2.8、绘制星星2.9、绘制圣诞树2.10、绘制星星背景动画2.11、定义初始化函数并调用 3、结尾 1、效果预览 圣…

Unity3D 访问Access数据库

Unity3D 访问Access数据库 在开始这个小教程之前呢&#xff0c;其实在网上你已经可以找到相关的资料了&#xff0c;但是我还是要把我自己做练习的一点东西分享出来。写这个教程的主要原因呢&#xff0c;是一个朋友在u3d的官网论坛里&#xff0c;找到了这个demo&#xff0c;但是…

uni.reLaunch前出现uni.showToast,不会成功弹出提示信息

解决方案&#xff1a; uni.showToast({title: 发布成功,duration: 1000});setTimeout(function() {uni.reLaunch({url: /pages/tips/index})}, 1000);

LaTeX 基础笔记。开篇

LaTeX 的起源非常牛逼&#xff0c;有一套书大家可能听说过《计算机程序设计艺术》&#xff0c;写了好几本。当然能在计算机方面写上艺术俩字的书恐怕不是我们一般人能读懂得东西了。他的作者在1976年准备写第二卷的时候发现计算机的排版非常难看&#xff0c;所以&#xff0c;为…

Java旧版不断发展

我最近偶然发现了JDK API的一个非常有趣的警告&#xff0c;即Class.getConstructors()方法。 它的方法签名是这样的&#xff1a; Constructor<?>[] getConstructors()有趣的是&#xff0c; Class.getConstructor(Class...)返回一个Constructor<T> &#xff0c;并…

React 学习笔记 —— Ref Hook

用以下三种方式创建 Ref 都可以 import React from reactexport default function Count () {const [count ,setCount] React.useState(0)const myRef React.createRef()const myRef2 React.useRef() // Ref Hook 的方式const myRef3 {current: undefined}const addNumber…

MFC消息机制

MFC消息机制 MFC消息机制涉及许多知识&#xff0c;比如消息分类&#xff0c;消息映射等。知识先了解一下&#xff0c;马上动手实践才是硬道理。我建了个SDI项目&#xff0c;把常用的消息试验了一遍。如果像我一样初学的&#xff0c;可以留下邮箱索取源码。// MainFrm.h afx_msg…