|
<!DOCTYPE HTML> <html> <head> <title>层级选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div,span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { font-size: 14px; height: 53px; width: 47px; background: #CC66FF; border: #000 1px solid; font-family: Roman; } input{ margin: 5px 5px; } </style> <!--引入jquery的js库--> <script src="D:\workspace\jquery\jquery-1.4.2.js"></script> <script type="text/javascript"> $().ready(function() { /* ---------层级选择器练习--------- */ //改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" $("#b1").click(function(){ $("body div").css("background-color","#F08080"); }); //改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" $("#b2").click(function(){ $("body>div").css("background-color","#FF0033"); }); //改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3" $("#b3").click(function(){ $("#one+div").css("background-color","#0000FF"); }); //改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" $("#b4").click(function(){ $("#two~div ").css("background-color","#9ACD32"); }); //改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347" id="b5" $("#b5").click(function(){ $("#two").siblings("div").css("background-color","#FF6347"); }); }); </script> </head> <body> <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" /> <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" /> <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3" /> <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" /> <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347" id="b5" /> <h1>天气冷了</h1> <div id="one">id为one</div> <div id="two"> id为two <div class="mini"> class是 mini</div> </div> <div class="one"> class是 one <div class="mini"> class是 mini</div> <div class="mini"> class是 mini</div> </div> <div class="one"> class是 one <div class="mini01"> class是 mini01</div> <div class="mini"> class是 mini</div> </div> <br> <div id="mover">动画</div> <br> </body> </html> |
|
|
来自： 金银宝100 > 《jQuery知识点》
