jQuery选择器之层级选择器

前言：层级选择器主要分为四种，分别是祖先后代选择器、父子选择器、前后选择器、前兄弟选择器，下面，我将会分别从他们的表示、用途、例子来分别说明这四种选择器。
写在前面，我下面举例子时js代码和css代码都是另起一个页面的，所以大家要运行代码的时候注意一下。

1. 祖先 后代选择器

（1） 说明
表示：$(“ancestor descendant”)
用途：选取ancestor元素后所有的descendant元素，例如：$(“form input”))表示选取form元素所包含的所有的input子元素。
（2） 运行代码
Html页面

	
		
		
		
		
		
	
	
		

			用户名：

			密码：

		
		表单的外框：
	

Js页面

$(document).ready(function  () {
	$("form input").css("border","2px dotted green");
});

（3） 运行结果

2. 父子选择器

（1） 说明
表示：$(“parent > child”)
用途：选取parent元素后所有的直属child元素，例如：$("#main >*")表示选取id为“main”的元素所包含的所有的子元素。
（2） 运行代码
*Html页面 *

	
		
		
		
		
		
	
	
		
			

			chlid
			

			

				

				

			
			
grand
			
a span in child
			a span in main
		
	

Js页面

$(document).ready(function  () {
	$("#main >*").css("border","3px double red");
});

Css页面

body{
	font-size: 14px;
}
span#main{
	display: block;background: yellow;height: 110px;
}
button{
	display: block;float: left;margin: 2px;font-size: 14px;
}
div{
	width: 90px;height: 90px;margin: 5px;float: left;background: #bbf;font-weight: bold;
}
div.mini{
	width: 30px;height: 30px;background: green;
}

（3） 运行结果

3. 前后选择器

（1） 说明
表示：$(“prev + next”)
用途：prev和next是两个同级别的元素. 选中在prev元素后面的next元素，例如：$(“#label + input”)选在id为label元素后面的input元素.如果id为label元素后面没有同级的input元素，那么这个(“#label + input”).length=0.
（2） 运行代码
Html页面

	
		
		
		
		
	
	
		

			姓名：

			密码：
		
	

Js页面

$(document).ready(function  () {
	$("label + input").css("border","2px dotted green");
});

（3） 运行结果

4. 前兄弟选择器

**
（1） 说明
表示：$(“prev ~ siblings”)
用途：匹配“prev”元素之后的所有兄弟元素；具有相同的父元素，并匹配过滤出“siblings”选择器。例如：运行代码KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲main ~ div")选择i…("#main ~ div").length = 0
（2） 运行代码
Html页面

	
		
		
		
		
		
	
	
		
第一个div元素
		一个span元素
id=mian
		
第二个div元素
		
一个p标签
		
第三个div元素
	

Js页面

$(document).ready(function  () {
	$("#main ~ div").css("border","2px double blue");
})

Css页面

div,span,p{
	display: block;
	width: 90xp;
	height: 90xp;
	margin: 3px;
	background:aquamarine;
	float: left;
	font-size: 14px;
}

（3） 运行结果