jQuery层次选择器

最新推荐文章于 2021-05-21 14:10:45 发布

微风吹过李子树

最新推荐文章于 2021-05-21 14:10:45 发布

阅读量97

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_43171186/article/details/103689439

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接复制粘贴到自己的编辑软件内运行即可得到结果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次选择器</title>
	</head>
	<body>
		<div id="par">
			爷爷
			<div id="1">大伯
				<div id="2">大堂哥</div>
				<p>大堂姐</p>
			</div>
			<div id="3">爸爸
				<p>亲姐</p>
				<div id="gege">亲哥</div>
				<div id="4">自己</div>
				<p>亲妹</p>
				<div id="5">亲弟</div>
			</div>
			<p>姑姑
				<p>表妹</p>
			</p>
		</div>	
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
	<!-- 
		层次选择器：
			后代选择器    $("指定元素  元素类型")  $("#parent div") 选择id属性值为parent的元素的所有后代div元素
			子代选择器    $("指定元素 > 元素类型") $("#parent > div") 选择id属性值为parent的元素的第一代div元素
			相邻兄弟选择器 $("指定元素 + 元素类型") $("#parent + div") 选择id属性值Wieparent的元素的下一个div元素 只找一个元素
			同辈兄弟选择器 $("指定元素 ~ 元素类型") $("#parent ~ div") 选择id属性值为parent 的元素的下面所有指定的元素
	 -->
	 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
	 	console.log("============后代选择器============");
		var a =$("#par div");//后代选择器：选择所有的后代
		console.log(a);//所有的div
		console.log("============子代选择器============");
		var b=$("#par > div");//只选择第一代子代
		console.log(b);id=1,3
		console.log("============相邻弟弟选择器============");
		var c=$("#gege + div");
		var d=$("#4 + div");//没有找到，因为跟他相邻的元素不是div
		console.log(c);//id=4
		console.log(d);
		console.log("============同辈弟弟选择器============");
		var e=$("#gege ~ div");
		var f=$("#4 ~ div");
		console.log(e);//id=4,5
		console.log(f);//id=5
	 </script>
</html>

运行结果（浏览器鼠标右键选择：查看元素/检查或者直接按F12：选择控制台/console进行查看）：
在这里插入图片描述

微风吹过李子树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery层次选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>层次选择器</title> </head> <body> <div id="parent"> 爷爷 <div>大伯 &lt...
复制链接

扫一扫

专栏目录