jQuery中:hidden和:not(:visible)之间的区别 [英] Difference between :hidden and :not(:visible) in jQuery

问题描述

我知道两个jQuery选择器都匹配不可见的元素(width或height等于0，display: none，父级为display: none)，并且我认为这暗示着它们应该产生相同的结果在 文档.

I know that both jQuery selectors match elements that are not visible (width or height equal to 0, display: none, parent with display: none), and I believe it is implied they should yield the same result in the docs.

出于可读性原因，我宁愿使用:hidden，但我想知道:

For readability reasons, I would rather use :hidden but I want to know:

• 我应该考虑潜在的陷阱吗?
• 我总是会得到完全相同的结果吗?
• 哪个选项的性能更好?

推荐答案

• 编辑3/22/2016:添加至答案:jQuery 1.12/2.2和3.0 (*请参见答案结尾)
• 编辑3/8/2016:增强答案
• EDIT 3/22/2016: add to answer re: jQuery 1.12/2.2 and 3.0 (*see end of answer)
• EDIT 3/8/2016: enhance answer

可以将元素视为隐藏的原因有几个:

Elements can be considered hidden for several reasons:

• 它们的CSS display值为none.
• 它们是type="hidden"的形式元素.
• 其宽度和高度明确设置为0.
• 祖先元素被隐藏，因此该元素未显示在页面上.
• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

元素被认为是可见的，因为它们仍会占用布局中的空间.在隐藏元素的动画期间，在动画结束之前，该元素被视为可见的.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.

不在文档中的元素不被视为可见； jQuery无法确定将它们附加到文档后是否可见的方法，因为它取决于适用的样式.

Elements that are not in a document are not considered to be visible; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.

:hidden选择器与:visible选择器相反.因此，:visible不会选择:hidden选择的每个元素，反之亦然.

The :hidden selector is the opposite of the :visible selector. So, every element selected by :hidden isn't selected by :visible and vice versa.

在动画显示元素期间，该元素在动画开始时被视为可见.

During animations to show an element, the element is considered to be visible at the start of the animation.

确定:hidden的方式在jQuery 1.3.2中已更改.如果某个元素或其任何父元素在文档中不占用空间，则假定该元素为隐藏的. 不考虑CSS可见性

How :hidden is determined was changed in jQuery 1.3.2. An element is assumed to be hidden if it or any of its parents consumes no space in the document. CSS visibility isn't taken into account

澄清:宽度或高度等于0"，由于某些浏览器(操作数)在某些情况下报告小于0，因此jQuery在内部使用了<=0.

Clarification "width or height equal to 0," - not strictly true as some browsers (opera) reports less than 0 in some instances so jQuery uses <=0 internally.

1. 我应该考虑潜在的陷阱吗?
2. 我总是会得到完全相同的结果吗?
3. 哪个选项的性能更好?

1:除了我不知道的明显以外，陷阱"在某种程度上是主观的.我之所以这样说，是因为我尝试避免代码中的负"测试(而不是x或！x类型检查)，因为对我而言，相等性检查更直观.

1: "Pitfalls" other than obvious of which I am unaware of any, is somewhat subjective. I say this as I try to avoid "negative" tests in code (not x or !x type checks) as equality checks are more intuitive for my brain to understand.

2:是的，结果应该相同

2: Yes, the result should be the same

3:回复:效果 之间的区别:RE:1.10.1版本

3: Re: Performance Difference between: RE: 1.10.1 version

可见条件检查使用内部未隐藏的

Visible condition check uses the not hidden internally:

jQuery.expr.filters.visible = function( elem ) {
    return !jQuery.expr.filters.hidden( elem );
};

因此可以说严格来说，隐藏"应该更有效地避免非"状态.

So it could be said that strictly speaking "hidden" should be more efficient avoiding the "not" condition.

在内部，jQuery使用从右到左"选择器，因此在某些情况下选择器将发挥更大的作用.

Internally, jQuery uses a "right to left" selector so the selector will make more of difference in some cases.

为了性能，请使用

$(selector).filter(':hidden')

或

$(selector).not(':visible') 

而不是

$('selector:not(:visible)') 

或

$('selector:hidden')

这是为什么? :hidden是jQuery扩展，因此无法利用本机DOM querySelectorAll()方法提供的性能提升. (有关Sizzle引擎的发生方式，请从右到左进行解析)

Why is this? :hidden is a jQuery extension and therefore cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. (see the right to left parsing of the Sizzle engine for how it will occur)

这是因为对于$('selector:hidden')表单，它将选择(遍历DOM)

This is because for the $('selector:hidden') form, it will select (walking the DOM)

1. 所有隐藏元素优先
2. 然后从该集合中选择与选择器匹配的那些.最好先匹配选择器，然后过滤该集合中隐藏的选择器.
1. all hidden elements first,
2. then select those matching the selector from that set. It would be preferred to match the selector first, then filter those in that set that are hidden.

内部"isHidden"功能:(jQuery 1.10.1)

internal "isHidden" function: (jQuery 1.10.1)

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中使用，例如:

Used for example in the .showHide internally such as:

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

值得注意的是，defaultPrefilter中的隐藏"属性为:

Worth noting that the "hidden" attribute in defaultPrefilter is:

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

关于样式的特殊说明:

将元素CSS设置为:

Special note on style:

Setting an elements CSS as:

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

非常快.

您还可以非常快速地检测到这一点:

You can also detect this very fast:

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

请记住，尽管该元素仍然占据空间，而document.getElementById("hide-me").style.display = "block";似乎确实使它可见，但是请记住，某些 PARENT可能不可见，因此该元素可能仍被视为隐藏" -并且jQuery确实检测到了这一点(见上文)

Remember though that the element still takes up space whereas document.getElementById("hide-me").style.display = "block"; does seem to make it visible but keep in mind that some PARENT might NOT be visible thus the element might still be considered "hidden" - and jQuery does detect this (see above)

其他参考: https://api.jquery.com/hidden-selector/

这些版本在速度上进行了重大改进.

There have been some significant speed improvements in these versions.

• 参考此帖子: https://github.com/jquery/jquery/issues/2042
• 相关参考: https://github.com/jquery/sizzle/issues /315#issuecomment-74336936
• Reference this post: https://github.com/jquery/jquery/issues/2042
• Related reference: https://github.com/jquery/sizzle/issues/315#issuecomment-74336936

此更改最多可以提高 1600％的速度！通过尽可能利用缓存-从我观察到的情况来看，这些选择器经常发生这种情况.如果您需要在此方面进行改进或关注，请同时测试您的页面，如果页面中使用率很高，请用例进行测试.

This change can yield up to 1600% speed improvements wow! By taking advantage of caching when possible - which from what I have observed often occurs with these selectors. Test your pages with both if you have need for improvement or concerns in this area and use cases if heavily utilized within your pages.

使用.show()和.hide()可以看到更好的性能.

You should see improved performance with .show() and .hide() as a result.

jQuery 1.12+和2.2.0+和3.0修改了:visible和:hidden过滤器的含义.如果元素具有布局框，则将被视为:visible.这包括宽度和/或高度为零的那些.为您的选择器提防计数.示例:现在，:visible过滤器将选择不包含内容的内联元素和br元素.

jQuery 1.12+ and 2.2.0+ and 3.0 modify the meaning of the :visible and :hidden filters. Elements will be considered :visible if they have layout boxes. This includes those with zero width and/or height. For your selectors beware of the count. Examples: inline elements with no content and br elements will now be selected by the :visible filter.

页面标记示例:

<div>
</div>
<span></span>
<br />
<p>
</p>

具有以下扇区:

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

• 在jQuery 1.11.1和2.1.4中，visibleElementCount
的返回值2
• 在jQuery 1.12 +，2.2.0 +和3.0中，visibleElementCount的得分为4.测试您何时依赖此事实，因为这可能是页面的重大更改.
• In jQuery 1.11.1 and 2.1.4 return value 2 for visibleElementCount
• In jQuery 1.12+ and 2.2.0+ and 3.0 you’ll obtain 4 for visibleElementCount. Test when you rely upon this fact as it may be a breaking change for your pages.

这篇关于jQuery中:hidden和:not(:visible)之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！