jQuery选择器

3.5层次选择器

3.5.1 ancestor descendant 选择器

ancestor descendant选择器的使用方法如下：

$("ancestor descendant");

ancestor是指任何有效的选择器
descendant是用以匹配元素的选择器，并且它是ancestor所指定元素的都带元素

【例如】通过jQuery为版权列表设置样式。
（1）在该文件的 < head> 标记中应用下面的语句引入jQuery库：

<script type="text/javascript" src="..js/jquery-1.11.1.min.js"></script>

（2）在页面的< body>标记中：

<div id="button">
		<ul>
			<li>技术服务热线：400-675-1066传真：0431-84972266企业邮箱：msiafusedya@czsuhd.con</li>
			<li>Copyright&copy;www.mrbccd.com ALL Rights Reserved!</li>
		</ul>
</div>
		<ul>
			<li>技术服务热线：400-675-1066传真：0431-84972266企业邮箱：msiafusedya@czsuhd.con</li>
			<li>Copyright&copy;www.mrbccd.com ALL Rights Reserved!</li>
		</ul>

（3）编写CSS样式：

	<style type="text/css">
		#button{
			background-image: url(../images/1569231904827.jpg);
			width: 800px;
			height: 58px;
			clear: both;
			text-align: center;
			padding-top: 10px;	
			font-size: 9pt;		
		}
		.copyright{
			color: #FFFFFF;
			list-style: none;
			line-height: 20px;
		}
	</style>

（4）在引入jQuery库的代码下方编写jQuery代码，并为其添加CSS样式：

<script type="text/javascript">
		$(document).ready(function(){
		$("div ul").addClass("copyright");
		});
</script>

3.5.2 parent>child 选择器

parent>child选择器的使用方法如下：

$("parent>child");

parent 是指任何有效的选择器
child是用以匹配元素的选择器，并且它是parent元素的子元素
【例如】为表单的直接子元素input换肤。

<script type="text/javascript" src="..js/jquery-1.11.1.min.js"></script>
<form id="form1" name="form1" method="post" action="">
		姓&nbsp;&nbsp;名：<input type="text" name="name" id="name"/>
			<br />
		籍&nbsp;&nbsp;贯：<input type="text" name="native" id="native"/>
			<br />
		生&nbsp;&nbsp;日：<input type="text" name="birthday" id="birthday"/>
			<br />
		E—mail：<input type="text" name="email" id="email"/>
			<br />
	<span>
		<input type="button" name="change" id="change" value="换肤" />
	</span>
		<input type="button" name="default" id="default" value="恢复默认" />
			<br />
</form>
		<script type="text/javascript">
			$(document).ready(function(){
			$("#change").click(function(){		  //绑定"换肤"按钮的单击事件
			$("form>input").addClass("input");//为表单元素的直接子元素input添加样式
			    });
			$("#default").click(function(){		  //绑定"恢复默认"按钮的单击事件
			$("form>input").removeClass("input"); //移除为表单元素的直接子元素input添加的样式
				});
			});
		</script>

编写CSS样式，用于指定的input元素的默认样式，并添加一个用于改变input元素样式的CSS类：

<style type="text/css">
		input{
			margin: 5px;			/*设置input元素的外边距为5像素*/
		}
		.input{
			font-size: 12px; 		/*设置文字大小*/
			color: #333333;			/*设置文字颜色*/
			background-color: #cef;	/*设置背景颜色*/
			border: 1px solid #000000;/*设置边框*/
		}

在引入jQuery库的代码下方编写jQuery代码，实现匹配表单元素的直接子元素并为其添加和移除CSS样式：

<script type="text/javascript">
    $(document).ready(function(){
         $("#change").click(function(){
              $("form>input").addClass("input");
         });
         $("#default").click(function(){
         $("form>input").removeClass("input");
         });
         });
 </script>

3.5.3 prev+next 选择器

prev+next选择器用于匹配所有紧接在prev元素后的next元素。其中prev和next是两个相同级别的元素。
prev+next选择器的使用方法：

$("prev+next");

prev 是指任何有效的选择器
next是一个有效选择器并紧接着prev选择器
【例如】筛选紧跟在< label>标记后的< img>标记并改变匹配元素的背景颜色为淡蓝色：

<div>
		<label>第一个label</label>
		<p>第一个p</p>
		<fieldset>
			<label>第二个label</label>
			<p>第二个p</p>
		</fieldset>
	</div>
		<p>div外面的p</p>
		<script type="text/javascript" charset="GBK">
			$(document).ready(function(){
				$("label+p").addClass("background"); //为匹配的元素添加CSS类
			});
		</script>

编写CSS样式，用于设置body元素的字体大小，并且添加一个用于设置背景的CSS类

<style type="text/css">
		.background{background: #cef}
		body{font-size: 12px;}
</style>

3.5.4 prev~siblings 选择器

prev~sibling选择器用于匹配prev元素后的所有siblings元素。prev和siblings是两个同辈元素。
prev~sibling选择器的使用方法如下：

$("prev~siblings");

prev 是指任何有效的选择器
siblings是一个有效选择器并紧接着prev选择器
【例如】筛选页面中div元素的同辈元素

<div>		
		<p>第一个p</p>
		<p>第二个p</p>
</div>
		<p>div外面的p</p>
		<script type="text/javascript" charset="GBK">
			$(document).ready(function(){
				$("div~p").addClass("background");
				//为匹配的元素添加CSS类
			});
		</script>

<style type="text/css">
		.background{background: #cef}
		body{font-size: 12px;}
</style>