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.
For readability reasons, I would rather use :hidden but I want to know:
Elements can be considered hidden for several reasons:
display value of none.type="hidden".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.
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.
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.
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
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: "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: Yes, the result should be the same
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.
Internally, jQuery uses a "right to left" selector so the selector will make more of difference in some cases.
For performance, use
$(selector).filter(':hidden')
or
$(selector).not(':visible')
rather than either
$('selector:not(:visible)')
or
$('selector:hidden')
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)
This is because for the $('selector:hidden') form, it will select (walking the DOM)
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 );
}
Used for example in the .showHide internally such as:
if ( elem.style.display === "" && isHidden( elem ) ) {
Worth noting that the "hidden" attribute in defaultPrefilter is:
hidden = elem.nodeType && isHidden( elem ),
Setting an elements CSS as:
document.getElementById("hide-me").style.visibility = "hidden";
is very fast.
You can also detect this very fast:
document.getElementById("hide-me").style.visibility === "hidden";
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)
Additional reference: https://api.jquery.com/hidden-selector/
There have been some significant speed improvements in these versions.
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.
You should see improved performance with .show() and .hide() as a result.
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.
Page Markup examples:
<div>
</div>
<span></span>
<br />
<p>
</p>
With the following sector:
var visibleElementCount = $('body').find(':visible').length;
visibleElementCountvisibleElementCount. Test when you rely upon this fact as it may be a breaking change for your pages.Hmm.. interesting :)
:hidden = :not(:visible) = css selector 'display: none;'
Now some other facts:
css selector 'visibility: hidden;' = 'opacity: 0;' = not display in page but occupy space.
css selector 'display: none;' = not showing in page and also not occupying space.
by jQuery you can play with element who have 'display: none' style
HTML Example:
<input type='text' class='display' value='Display' />
CSS Example:
.display{
display: none;
}
Check:
alert($('.display').val());// Display
$('.display').val('Hello');
alert($('.display').val());// Hello
:notcan be used for other things like:checked– Sandeep Bansal:hiddenis better/easier to comprehend to me than the negative selector of:not(:visible)- and should actually be imperceptibly but slightly faster. – Mark Schultheiss