锋利Jquery 第七天 --- jquery 层次选择器
锋利Jquery 第七天 --- jquery 层次选择器
<html>
<head>
<title>jquery 层次选择器</title>
<script type="text/javascript" src="jquery-1.3.1.js"></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>
<script type='text/javascript'>
$(document).ready(function(){
//改变body 内所有的div 元素的背景色
$("body div").css("background","#ffeeaa");
$("ancestor descendant") 选取所有ancestor 元素里的所有 descendant 后代元素 ： $("body div"); body 元素下的 所有div. 两个元素之间用空格 相隔。
//改变body 内子div 元素的背景色
$("body > div").css("background","yellow");
$("parent > child") 选取parent元素下的child子元素
//改变class为one 的下一个<div>元素的背景色
// $(".one + div").css("background","blue"); 这两等价
$(".one").next("div").css("background","red");
$('prev + next') 选取紧接在 prev 元素后的 next 元素
//改变id 为two的元素后面的所有<div>兄弟元素的背景色
// $("#two ~ div").css("background","#bbffaa"); 这两等价
$("#two").nextAll("div").css("background","green");
$('prev ~siblings') 选取prev 元素后面的所有 siblings 元素
});
</script>
</head>
<body>
<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>
</body>
</html>
浙公网安备 33010602011771号