1.层次选择器介绍

前面基本选择器是直接通过DOM节点本身来进行选择的，这里的层次选择器则是基于DOM元素的层次关系获取特定的元素，例如相邻元素、同辈元素、子元素与后代元素，也就是迂回的方式来选择相应的元素。

2.详解每个层次选择器

3.应用实例

	
		
		
		<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的div
			

				class为mini的div
			
		
		
		

			id为two，class为one，title为jason的div.
			

				class为mini，title为Spanish的div
			
			

				class为mini，title为Jason为div
				
Hello
			
		
			
		
		

			
class为mini的div
			
class为mini的div
			
class为mini的div
			

		
		
		
		

			style的display为"none"的div.
		
		
		
		

			class为hide的div
		
		
		
		

			包含input的type为"hidden"的div

			
		

		正在执行动画的span元素