• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.4 可见性伪类选择器

可见性伪类选择器,就是根据元素的“可见”与“不可见”这2种状态来选取元素。

在jQuery中,可见性伪类选择器只有2种:

jQuery可见性伪类选择器
选择器 说明
:hidden 选取所有不可见元素
:visible 选取所有可见元素,与:hidden相反

“:hidden”选择器选择的不仅包括样式为display:none所有元素,而且还包括属性type="hidden"和样式为visibility:hidden的所有元素。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style type="text/css">
        #list *
        {
            display:none;
        }
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () { 
                $("#list :hidden").css("display", "block");
            })
        })
    </script>
</head>
<body>
    <div id="list">
        <div>(1)HTML</div>
        <p>(2)CSS</p>
        <span>(3)JavaScript</span>
    </div>
    <input id="btn" type="button" value="显示" />
</body>
</html>

在浏览器预览效果如下:

当我们点击“显示”按钮后,在浏览器预览效果如下:

分析:

$("#list :hidden")表示选择id为list元素下的所有“不可见元素”。

 
$("#btn1").click(function () {
    //定义鼠标单击事件的内容
});

上面代码中的click()表示元素的鼠标单击事件。对于鼠标单击事件,我们之前在JavaScript入门教程(这是jQuery的先修教程),只不过上面这种形式是jQuery的写法,大家先接触一下这种写法,我们在后面教程中会大量接触到。

在jQuery中,可见性伪类选择器用得比较少,了解一下即可。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部