Home > Article > Web Front-end > What are the jquery visibility filter selectors?

What are the jquery visibility filter selectors?

青灯夜游Original: 2020-12-23 15:07:094352browse

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.

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;)

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>

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;)

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>

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!

jquery 封装对象选择器 display

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to determine whether an object has focus in jqueryNext article：How to determine whether an object has focus in jquery

See more

What are the jquery visibility filter selectors?

Related articles