03-JQuery学习之层次选择器

选择器 名称 举例
后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素
相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

选择器 名称 举例
后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素
相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次选择器</title>
		<style type="text/css">
			.testColor {
				background-color: green;
			}

			.gray {
				background: gray;
			}
		</style>
	</head>
	<body>
		<div id="parent">层次择器
			<div id="child" class="testColor">父选择器
				<div class="gray">子选择器</div>
				<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
				<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
			</div>
			<div>
				选择器2<div>选择器2中的div</div>
			</div>
		</div>
	</body>
	<script src="Jquery/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		console.log("=========后代选择器-选择所有后代=====");
		var ancestorS = $('#parent div');
		console.log(ancestorS)
		ancestorS.each(function() {
			console.log($(this).text());
		});

		console.log("=========子代选择器-选择儿子辈=====");
		var child = $('#parent>div');
		child.each(function() {
			console.log($(this).text());
		});

		console.log("=========相邻选择器=====");
		var pre_next = $(".gray + img");
		console.log(pre_next.length);

		console.log("=========同辈选择器,其后，（弟弟）=====");
		var pre_siblings = $(".gray ~ img");
		console.log(pre_siblings.length);
	</script>
	<!-- 
		层次选择器
			后代选择器
				格式：父元素 指定元素 （空格隔开）
				示例： $('父元素 指定元素')
				选择父元素的所有指定元素（包含第一代、第二代等）
			子代选择器
				格式：父元素>指定元素
				示例： $('父元素>指定元素')
				选择父元素的所有第一代指定元素
			相邻选择器
				格式：元素+指定元素（加号隔开）
				示例： $('元素+指定元素')
				选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在则获取不到）
			同辈选择器
				格式：元素~指定元素
				示例：$('元素~指定元素')
				选择元素的下面所有指定元素
				
		-->
</html>
posted @ 2021-03-29 21:02  雪漠阳光  阅读(68)  评论(0)  编辑  收藏  举报