可见性过滤选择器
2019-10-19 本文已影响0人
Tn299
通过元素显示状态来选取元素
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>
