“可见性”伪类选择器 - jQuery

可见性伪类选择器，指的就是根据元素“可见”与“不可见”这两种状态来选取元素。在jQuery中，可见性伪类选择有两种，如下表所示。

可见性伪类选择器
选择器	说明
: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>

默认情况下，预览效果如下图所示。

当我们点击【显示】按钮后，预览效果如下图所示。

分析：

$("li:hidden")表示选取所有不可见的li元素。

$("#btn").click(function(){
    ……
});

上面这段代码表示鼠标单击事件，这个是jQuery的语法，等价于JavaScript的obj.onclick = function(){}。我们在“6.3 鼠标事件”这一节中会详细介绍，这里简单了解一下就可以了。