| $().ready(function() { /* ---------层级选择器练习--------- */ //改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" $("#b1").click(function(){ $("body div").css("background-color", "#F08080"); }); /* $("#b1").click(function(){}) 等价于: document.getElementById("b1").onclick = function(){}; */ //改变 <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", "#0000FF"); }); //改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347" id="b5" $("#b5").click(function(){ $("#two").siblings("div").css("background-color", "#0000FF"); //$("#two").next("div").css("background-color", "#0000FF");//选择id为two元素后面紧邻的div兄弟元素 //$("#two").nextAll("div").css("background-color", "#0000FF");//选择id为two元素后面所有的div兄弟元素 //$("#two").prev("div").css("background-color", "#0000FF");//选择id为two元素前面紧邻的div兄弟元素 //$("#two").prevAll().css("background-color", "#0000FF");//选择id为two元素前面所有的兄弟元素 }); }) |
|
|
