直接复制粘贴到自己的编辑软件内运行即可得到结果:
<!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进行查看):