前端基础 -JQuery之 层次选择器

JQuery层次选择器 层次选择器：

• a b 选择器a选择的区域里面所有为选择器b的后代元素
• a>b 选择器a选择的区域里面所有为选择器b的子代元素
• a+b 选择器a选择器的区域后面第一个为选择器b的弟弟元素
• a~b 选择器a选择器的区域后面所有的为选择器b的弟弟元素

层次选择器案例：

效果图：

代码：

	
		
		02-层次选择器.html
		
		
		
		
		
			$(function() {

				// 	  
				$("#btn1").click(function() {
					$("body div").css("background-color", "red");
				})

				//	  
				$("#btn2").click(function() {
					$("body>div").css("background-color", "red");
				})

				//	  
				$("#btn3").click(function() {
					$("#one+div").css("background-color", "red");
				})

				//	  
				$("#btn4").click(function() {
					$("#two~div").css("background-color", "red");
				})

			})
		
	

	
		层次选择器.
		手动重置页面元素
		点击下列按钮时先自动重置页面

		
		
		
		

		
		

		
		

			id为one,class为one的div
			
class为mini
		

		

			id为two,class为one,title为test的div.
			
class为mini,title为other
			
class为mini,title为test
		

		

			
class为mini
			
class为mini
			
class为mini
			

		

		

			
class为mini
			
class为mini
			
class为mini
			
class为mini,title为tesst
		

		
style的display为"none"的div

		
class为"hide"的div

		

			包含input的type为"hidden"的div
		

		正在执行动画的span元素.