<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><styletype="text/css">div,span,p{width:140px;height:140px;margin:5px;background:#aaa;border:#0001pxsolid;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><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">$(function(){//相当于window.onload//使用id选择器选择id=btn1的元素$("#btn1")，并且添加点击事件$("#btn1").click(function(){$("bodydiv").css("background","#ffbadb");//选择body内的所有div元素});$("#btn2").click(function(){$("body>div").css("background","#ffbadb");//在body内,选择子元素是div的.});$("#btn3").click(function(){$("#one+div").css("background","#ffbadb");//选择id为one的下一个div元素});$("#btn4").click(function(){$("#two~div").css("background","#ffbadb");//择id为two的元素后面的所有div兄弟元素});$("#btn5").click(function(){$("#two").siblings("div").css("background","#ffbadb");//选择id为two的元素所有div兄弟元素});$("#btn6").click(function(){//选择和#one近邻的span元素，如果该span和#one不相邻则无效//$("span,#two").css("background","#ffbadb");//选择span元素和id为two的元素并改变其背景颜色//$("#one").nextAll("span").css("background","#ffbadb");//选择后面所有的span$("#one").nextAll("span:first").css("background","#ffbadb");//选择后面的第一个span});$("#btn7").click(function(){//选择id为two的元素前边的所有的div兄弟元素$("#two").prevAll("div").css("background","#ffbadb");;});})</script></head><body><inputtype="button"value="选择body内的所有div元素"id="btn1"/><inputtype="button"value="在body内,选择子元素是div的."id="btn2"/><inputtype="button"value="选择id为one的下一个div元素"id="btn3"/><inputtype="button"value="选择id为two的元素后面的所有div兄弟元素"id="btn4"/><inputtype="button"value="选择id为two的元素所有div兄弟元素"id="btn5"/><inputtype="button"value="选择id为one的下一个span元素"id="btn6"/><inputtype="button"value="选择id为two的元素前边的所有的div兄弟元素"id="btn7"/><br><br><divclass="one"id="one">id为one,class为one的div<divclass="mini">class为mini</div></div><divclass="one"id="two"title="test">id为two,class为one,title为test的div<divclass="mini"title="other">class为mini,title为other</div><divclass="mini"title="test">class为mini,title为test</div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"></div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"title="tesst">class为mini,title为tesst</div></div><divclass="none">style的display为"none"的div</div><divclass="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<inputtype="hidden"size="8"></div><spanid="span">^^span元素^^</span><spanid="span">--span元素--</span></body></html>