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：預設效果