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!