Home > Article > Web Front-end > How to apply jQuery :hidden selector?

How to apply jQuery :hidden selector?

黄舟Original: 2017-06-23 11:41:021341browse

Overview

Match all invisible elements, or elements of type hidden

Example

Description:

Find hidden tr

HTML Code:

<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>

jQuery Code:

$("tr:hidden")

Result:

[ <tr style="display:none"><td>Value 1</td></tr> ]

Description:

Match Elements with type hidden

HTML code:

<form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form>

jQuery code:

$("input:hidden")

Result:

[ <input type="hidden" name="id" /> ]

This selector is general It should also be used in conjunction with other selectors, such as class selector and element selector, etc. For example:

$("div:hidden").css({display:"block",color:"blue"})

The above code can set the hidden div element to be visible and set the font color inside to blue.
If not used with other selectors, the default state is used with the * selector, for example, $(":hidden") is equivalent to $("*:hidden").

Example code:






 
 
 
 
 
 
我是后来才可见的 
我是本来就是可见的

The above code can set the hidden div to be visible and set the text color inside to blue.

Example 2:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
.display {
display:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $(":hidden").css({display:"block",color:"blue"}); 
  }) 
}) 
</script>
</head>
<body>
<div class="display">我是后来才可见的</div>
<div>我是本来就是可见的</div>
<p class="display">我原来也是不可见的</p>
<button>点击查看效果</button>
</body>
</html>

Since the above code does not specify a selector to be used with the :hidden selector, it is used with the * selector by default, so the code can hide all element is visible, and the text color within it is set to blue.

The above is the detailed content of How to apply jQuery :hidden selector?. For more information, please follow other related articles on the PHP Chinese website!

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：jQuery selector: detailed use case of parentNext article：jQuery selector: detailed use case of parent

See more

How to apply jQuery :hidden selector?

Related articles