首页 > 编程笔记 > JavaScript笔记 > jQuery选择器

jQuery可见性伪类选择器

“可见性”伪类选择器，指的就是根据元素“可见”与“不可见”这两种状态来选取元素的一种伪类选择器。在 jQuery 中，“可见性”伪类选择器有两种，如表 1 所示。
表 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 所示：
默认效果
图 1：默认效果

我们点击【显示】按钮后，预览效果如图 2 所示：
点击按钮后的效果
图 2：点击按钮后的效果

$("li:hidden") 表示选取所有不可见的 li 元素。 
$("#btn").click(function(){
    ……
});
上面这段代码表示鼠标单击事件，是 jQuery 的语法，等价于 JavaScript 的 obj.onclick=function(){}。之后我们会详细介绍，这里简单了解一下即可。

所有教程

优秀文章