前面基本选择器是直接通过DOM节点本身来进行选择的,这里的层次选择器则是基于DOM元素的层次关系获取特定的元素,例如相邻元素、同辈元素、子元素与后代元素,也就是迂回的方式来选择相应的元素。
基本选择器 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //$(".one .mini").css("background-color","#0F0");//①祖先后代选择器 //$(".one > .mini").css("background-color","#0F0");//②注意与前面的差别 //$("#two+div").css("background-color","#0F0");//③#two的下一个同辈元素 //$("#two~div").css("background-color","#0F0");//④#two所有的同辈元素,注意与前一个差别 //上述第3个方法,可用下列方法来代替 //$("#two").next("div").css("background-color","#0F0"); //上述第4个方法,可用下列方法来代替 //$("#two").nextAll("div").css("background-color","#0F0"); //nextAll方法相类似但有明显差别的是.siblings(),可以选择其所有的同辈元素 $("#two").siblings("div").css("background-color","#0F0"); }); </script>id为one,class为one的divclass为mini的divid为two,class为one,title为jason的div.class为mini,title为Spanish的divclass为mini,title为Jason为divHelloclass为mini的divclass为mini的divclass为mini的divclass为hide的div包含input的type为"hidden"的div正在执行动画的span元素