“可见性”伪类选择器，指的就是根据元素“可见”与“不可见”这两种状态来选取元素的一种伪类选择器。在 jQuery 中，“可见性”伪类选择器有两种，如表 1 所示。
图 1：默认效果
图 2：点击按钮后的效果
| 选择器 | 说明 |
|---|---|
| :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 所示：
图 1：默认效果
我们点击【显示】按钮后，预览效果如图 2 所示：
图 2：点击按钮后的效果
$("li:hidden") 表示选取所有不可见的 li 元素。
$("#btn").click(function(){
……
});
上面这段代码表示鼠标单击事件，是 jQuery 的语法，等价于 JavaScript 的 obj.onclick=function(){}。之后我们会详细介绍，这里简单了解一下即可。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23786.html