锋利Jquery第九天 ----Jquery 可见性过滤选择器
锋利Jquery第九天 ----可见性过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>可见性过滤选择器</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//可见性过滤选择器，是根据元素的可见和不可见状态来选择相应的元素
//:hidden 选取所有不可见元素
//选取的元素包括：type="hidden"/style="display:none"/style="visibility:hidden
//:visible 选取所有可见元素
//改变所有可见的DIV元素
$("div:visible").css("background","yellow");
//显示所有隐藏的元素
$("div:hidden").show(300);
});
</script>
<style type="text/css">
div,span,p
{
width:140px; height:140px;
margin:5px;
background:#aaa;
border: solid 1px #000;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini
{
width:55px; height:55px;
background-color:#aaa;
font-size:12px;
}
div.hide
{
display:none
}
</style>
</head>
<body>
<h3 align="center">过滤选择器</h3>
<div class="one" id="one">
class等于one,id等于one
<div class="mini">class等于mini</div>
</div>
<div class="one" id="two" title="test">
class="one" id="two" title="test" 的DIV
<div class="mini" title="ohter">class为mini,title="ohter"</div>
<div class="mini" title="test">class为mini,title="test"</div>
</div>
<div class="one">
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini"></div>
</div>
<div class="mini">
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini" title="tesst">class等于mini,title="tesst"</div>
</div>
<div style="display:none" class="one">style="display:none" class="one"的div</div>
<div class="hide">class="hide"的div</div>
<div>包含input的type为"hidden"的div<input type="hidden" size="8" /></div>
<span id="mover">正在执行动画的span元素</span>
<div><p>含有p元素的div</p></div>
</body>
</html>
浙公网安备 33010602011771号