How to apply jQuery :hidden selector?-JS Tutorial-php.cn

How to apply jQuery :hidden selector?

黄舟

Release： 2017-06-23 11:41:02

Original

1364 people have browsed it

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>

Copy after login

jQuery Code:

$("tr:hidden")

Copy after login

Result:

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

Copy after login

Description:

Match Elements with type hidden

HTML code:

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

Copy after login

jQuery code:

$("input:hidden")

Copy after login

Result:

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

Copy after login

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"})

Copy after login

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:






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

Copy after login

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>

Copy after login

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!