jQuery层次选择器

最新推荐文章于 2022-02-26 12:02:53 发布

PeddyDuan

最新推荐文章于 2022-02-26 12:02:53 发布

阅读量226

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/duandapei/article/details/77753896

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

直接上代码分析，JS注释有对选择器的描述：

HTML代码：

<div class="wdiv">
	<h4>我是外层div</h4>
	<div class="ndiv">
		<h4>我是内层div </h4>
		<p class="p1">第一行文字</p>
		<p class="p2">第二行文字</p>
		<p class="p3">第三行文字</p>
		<p class="p4">第四行文字</p>
		<p class="p5">第五行文字</p>
		<p class="p6">第六行文字</p>
		<p class="p7">第七行文字</p>
		<p class="p8">第八行文字</p>
	</div>
</div>

JS代码：

<script type="text/javascript">
function select(){

	//后代元素选择器，包括儿子代、孙子代、重孙代...
	//p1元素被置为红色
	$(".wdiv .p1").css("background-color","red");
	//同上。注意此处选择器的写法：后代要写在前面
	$(".p2", ".wdiv").css("background-color","green");
	
	//子代元素选择器，只包括儿子代
	//由于选择的是儿子代，所以p3元素的背景色不会改变
	$(".wdiv > .p3").css("background-color","pink");
	
	//相邻元素选择器，选择的是相邻的后一个元素
	//p4紧挨在p3之后，所以p4元素被置为灰色
	$(".p3 + .p4").css("background-color","gray");
	//由于p5是在p6的前面，所以p5元素的背景色不会改变
	$(".p6 + .p5").css("background-color","gray");
	//由于p6不是紧挨在p4之后，所以p6元素的背景色不会改变
	$(".p4 + .p6").css("background-color","gray");
	
	//兄弟元素选择器，从后面所有兄弟元素中选择
	//p8元素被置为蓝色
	$(".p6 ~ .p8").css("background-color","blue");
}
</script>

结果：