jQuery层次选择器

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

原创最新推荐文章于 2022-02-26 12:02:53 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文通过一个家庭成员结构的HTML示例，详细解析了jQuery中层次选择器的使用方法，包括后代选择器、子代选择器、相邻兄弟选择器和同辈兄弟选择器，并提供了具体的代码实现和运行结果。

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

<!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>