层级选择器

最新推荐文章于 2022-04-04 08:27:56 发布

birdlun

最新推荐文章于 2022-04-04 08:27:56 发布

阅读量918

点赞数

分类专栏： 05 jquery

本文链接：https://blog.csdn.net/Birdmotianlun/article/details/100121214

版权

05 jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

层级选择器

列：层级选择器练习

运行效果图

html代码

<body>
	在给定的祖先元素下匹配所有的后代元素(儿子、孙子，曾孙子等)
	<input type="button" id="btn1" value="选择body中的所有的div元素" /><br />
	在给定的父元素下匹配所有的子元素（儿子）
	<input type="button" id="btn2" value="选择body中的第一级的孩子" /><br />
	匹配所有紧接在 prev 元素后的 next 元素(找与prev元素紧邻的下个元素 兄弟)
	<input type="button" id="btn3" value="选择id为two的元素的下一个元素" /><br />
	匹配 prev 元素之后的所有 siblings 元素（兄弟、同级的所有兄弟）
	<input type="button" id="btn4" value="选择id为one的所有的兄弟元素" /><br />

	<hr />
	<div id="one">
		<div class="mini">
			111
		</div>
	</div>

	<div id="three">
		<div class="mini">
			444
		</div>
		<div class="mini">
			555
		</div>
		<div class="mini">
			666
		</div>
	</div>
	<div id="four">
	</div>
</body>

jQuery代码：

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		$('#btn1').click(function(){//在给定的祖先元素下匹配所有的后代元素(儿子、孙子，曾孙子等)
			$('div .mini').css('background-color','#FF0000');
		});
		$('#btn2').click(function(){//在给定的父元素下匹配所有的子元素（儿子）
			$('body>div').css('background-color','#FF0000');
		});
		$('#btn3').click(function(){
         //匹配所有紧接在 prev 元素后的 next 元素(找与prev元素紧邻的下个元素 兄弟)
			$('#one+div').css('background-color','#FF0000');
		});
		$('#btn4').click(function(){
         //匹配 prev 元素之后的所有 siblings 元素（兄弟、同级的所有兄弟）
				$("#one~div").css("background-color","#FF0000");
		});
	});
</script>

结果：

点击第一个按钮