通过元素显示状态来选取元素

image.png
例：

image.png

代码

<title>无标题文档</title>
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<style type="text/css">
    #txt_show {display:none; color:#00C;}
    #txt_hide {display:block; color:#F30;}
</style>
<script type="text/jscript">
$(document).ready(function(e) {
    $("#btn1").click(function(){
        $("p:hidden").show();
    });
    $("#btn2").click(function(){
        $("p:visible").hide();
    });
});
</script>
</head>

<body>
<p>点击按钮，会被隐藏</p>
<p>显示隐藏</p>
<input type="button" value="显示隐藏的p元素" id="btn1" />
<input type="button" value="隐藏显示的p元素" id="btn2"/>
</body>

$(“:hidden”)

实现选取所有不可见的元素。

例： image.png

代码

<title>任务9：查找并显示在页面中被隐藏的元素</title>
<script type="text/jscript" src="jquery-2.1.4.min.js"></script>
<script type="text/jscript">
    $(document).ready(function(e) {
        $("#myBtnHide").click(function(){
            $("div").toggle(function(){
                $(this).attr("style","display:none")    
            }); 
        });
        $("#myBtnShow").click(function(){
            $(":hidden").show();
        });
    });
</script>
</head>
<body>
    <input class="input" type="button" value="隐藏DIV块" id="myBtnHide" style="width:170px;" />
    <input class="input" type="button" value="显示DIV块" id="myBtnShow" style="width:170px;" />
    <br><br>
    <div id="first"><img src="images/MyImage51.jpg" style="width:350px;height:200px" /></div>
</body>