在jQuery之间的区别：hidden和：not((可见))

> EDIT 3/22/2016：add to answer re：jQuery 1.12 / 2.2 and 3.0(* see end of answer)
>编辑3/8/2016：增强答案

元素可以被认为是隐藏的，原因有几个：

>他们的CSS显示值为none。
>它们是type =“hidden”的表单元素。
>它们的宽度和高度显式设置为0。
>一个祖先元素被隐藏，所以元素不会显示在页面上。

具有可见性的元素：隐藏或不透明度：0被认为是可见的，因为它们仍然占用布局中的空间。在隐藏元素的动画中，元素被认为是可见的，直到动画结束。

不在文档中的元素不被认为是可见的; jQuery没有办法知道在附加到文档后是否可见，因为它取决于适用的样式。

这个：隐藏的选择器与：可见的选择器相反。所以，由：hidden选择的每个元素都不会被选择：visible，反之亦然。

在显示元素的动画期间，该元素在动画开始时被认为是可见的。

如何：在jQuery 1.3.2中确定已被更改。如果某个元素或其任何一个父类消耗文档中的空间，则假设该元素是隐藏的。不考虑CSS可见性

澄清“宽度或高度等于0” – 不严格，因为某些浏览器(opera)在某些情况下报告小于0，因此jQuery在内部使用< = 0。
>我有什么潜在的陷阱我应该考虑吗？
>我会一直得到完全相同的结果吗？
哪个选项有更好的表现？

1：除了我不知道的明显之外，“陷阱”有些主观。我说这个，因为我试图避免代码中的“否定”测试(而不是x或！x类型检查)，因为平等检查对于我的大脑来说更为直观。

2：是的，结果应该是一样的

3：Re：表演
区别：RE：1.10.1版本

可见状态检查使用内部未隐藏：

@H_197_44@jQuery.exPR.filters.visible = function( elem ) { return !jQuery.exPR.filters.hidden( elem ); };

所以可以说，严格来说，“隐藏”应该更有效地避免“不”的条件。

在内部，jQuery使用“从右到左”选择器，因此在某些情况下，选择器会产生更多的差异。

为了表现，使用

@H_197_44@$(SELEctor).filter(':hidden')

要么

@H_197_44@$(SELEctor).not(':visible')

而不是任何一个

@H_197_44@$('SELEctor:not(:visiblE)')

要么

@H_197_44@$('SELEctor:hidden')

为什么是这样？ ：hidden是一个jQuery扩展，因此无法利用本机DOM querySELEctorAll()方法提供的性能提升。 (请参阅右侧解析Sizzle引擎的方式，以了解它的发生)

选择器的格式/格式

这是因为对于$(‘SELEctor：hidden’)形式，它会选择(走DOM)

>所有隐藏元素首先，
>然后从该集合中选择与选择器匹配的那些。最好首先匹配选择器，然后过滤那些隐藏的选项。

内部“isHidden”函数:( jQuery 1.10.1)

@H_197_44@function isHidden( elem,el ) { // isHidden might be called from jQuery#filter function; // in that case,element will be second argument elem = el || elem; return jQuery.css( elem,"display" ) === "none" || !jQuery.contains( elem.ownerDocument,elem ); }

例如在.showHide内部使用，例如：

@H_197_44@if ( elem.style.display === "" && isHidden( elem ) ) {

值得注意的是，defaultPrefilter中的“隐藏”属性是：

@H_197_44@hidden = elem.nodeType && isHidden( elem ),

风格特别说明：

将元素CSS设置为：

@H_197_44@document.getElementById("hide-me").style.visibility = "hidden";

非常快

您也可以非常快速地检测：

@H_197_44@document.getElementById("hide-me").style.visibility === "hidden";

记住，该元素仍占用空间，而document.getElementById(“hide-me”)。style.display =“block”;似乎使它可见，但请记住，一些PARENT可能不可见，因此该元素可能仍然被视为“隐藏” – 并且jQuery检测到这一点(见上文)

附加参考：https://api.jquery.com/hidden-selector/

附加信息re：jQuery 1.12 / 2.2和3.0 3/22/2016编辑

这些版本的速度有所改善。

>参考这篇文章：https://github.com/jquery/jquery/issues/2042
>相关参考：https://github.com/jquery/sizzle/issues/315#issuecomment-74336936

这个变化可以产生高达1600％的速度提升哇！通过尽可能利用缓存 – 从我所观察到的这些选择器经常发生。如果您需要改进或关注此领域，并在您的网页中大量使用的情况下，请同时测试您的网页。

结果，您应该看到使用.show()和.hide()改进的性能。

jQuery 1.12和2.2.0和3.0修改了：visible和：hidden的含义。将考虑元素：如果它们具有布局框，则可见。这包括零宽度和/或高度的那些。对于您的选择器，请注意计数。示例：没有内容和br元素的内联元素现在将通过以下方式选择：可见过滤器。

页面标记示例：

@H_197_44@<div> </div> <span></span> <br /> <p> </p>

有以下部门：

@H_197_44@var visibleElementCount = $('body').find(':visible').length;

>在jQuery 1.11.1和2.1.4中为visibleElementCount返回值2>在jQuery 1.12和2.2.0和3.0中，您将获得4个visibleElementCount。测试当你依靠这个事实，因为它可能是你的页面的一个突破性的变化。