“可见性”伪类选择器，指的就是根据元素“可见”与“不可见”这两种状态来选取元素的一种伪类选择器。在 jQuery 中，“可见性”伪类选择器有两种，如表 1 所示。
| 选择器 | 说明 |
|---|---|
| :visible | 选取所有可见元素 |
| :hidden | 选取所有不可见元素 |
所谓的不可见元素，指的是定义了 display:none 的元素。
举例：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style type="text/css">
- .select{display:none;}
- </style>
- <script src="js/jquery-1.12.4.min.js"></script>
- <script>
- $(function () {
- $("#btn").click(function(){
- $("li:hidden").css("display","block");
- });
- })
- </script>
- </head>
- <body>
- <ul>
- <li>HTML</li>
- <li>CSS</li>
- <li>JavaScript</li>
- <li class="select">jQuery</li>
- <li>Vue.js</li>
- </ul>
- <input id="btn" type="button" value="显示">
- </body>
- </html>
默认情况下，预览效果如图 1 所示：
我们点击【显示】按钮后，预览效果如图 2 所示：
$("li:hidden") 表示选取所有不可见的 li 元素。
- $("#btn").click(function(){
- ……
- });
上面这段代码表示鼠标单击事件，是 jQuery 的语法，等价于 JavaScript 的 obj.onclick=function(){}。之后我们会详细介绍，这里简单了解一下即可。
湘公网安备 43102202000103号
