What are the jquery visibility filter selectors?-JS Tutorial-php.cn

What are the jquery visibility filter selectors?

青灯夜游

Release： 2023-01-04 09:37:50

Original

4381 people have browsed it

jquery has two visibility filter selectors, namely: 1. ":hidden" selector, which is used to match all invisible elements, encapsulate them as jQuery objects and return them; 2. " :visible" selector, used to match all visible elements, encapsulate them as jQuery objects and return them.

What are the jquery visibility filter selectors?

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Recommended tutorial: jquery video tutorial

jquery visibility filter selector

jQuery’s visibility selector is based on The visible and invisible states of an element are used to select the corresponding element. There are two main ones:

":hidden", which selects all invisible elements.
":visible" selects all visible elements.

Visible selector: hidden not only includes elements whose style attribute display is none, but also includes elements such as text hidden fields () and visible:hidden.

jquery :hidden selector

jQuery's :hidden selector is used to match all invisible elements, encapsulate them as jQuery objects and return them.

Syntax:

jQuery( ":hidden" )
//或
$(&#39;:hidden&#39;)

Copy after login

Return value:

Returns a jQuery object that encapsulates all invisible elements.

If no corresponding match is found, an empty jQuery object is returned.

Note: In jQuery, visibility: hidden; and opacity: 0; are both considered visible because they occupy the corresponding physical space on the page.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(":hidden").show(3500);
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p style="display:none;">这是一个隐藏段落。</p>
<div style="display:none;">这是隐藏的 div 元素。</div>

</body>
</html>

Copy after login

jquery :visible selector

jQuery's :visible selector is used to match all visible elements, placing them Encapsulated as a jQuery object and returned.

Syntax:

jQuery( ":visible" )
//或
$(&#39;:visible&#39;)

Copy after login

Return value:

Returns a jQuery object that encapsulates all visible elements.

If no corresponding match is found, an empty jQuery object is returned.

Note: In jQuery, visibility: hidden; and opacity: 0; are both considered visible because they occupy the corresponding physical space on the page.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:visible").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p style="display:none">这是一个隐藏段落。 </p>

</body>
</html>

Copy after login

For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of What are the jquery visibility filter selectors?. For more information, please follow other related articles on the PHP Chinese website!