142 次浏览【转载需注明来源】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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" alt="">
<img src="http://www/baidu.com/img/bd_logo1.png" width="270" height="129" alt="">
</div>
<div>选择器2
<div>选择器2中的div</div>
</div>
<div>选择器3
<div>选择器3中的div</div>
</div>
</div>
</body>
</html>
<script src="jquery-3.7.1.js"></script>
<script>
/* 后代选择器 */
var hd = $("#parent div")
console.log(hd)
/* 子代选择器 */
var zd = $("#parent > div")
console.log(zd)
/* 相邻选择器 */
var xl = $("#child + div") //这里结果是同级
console.log(xl)
/* 同辈选择器 */
var tb = $("#child ~ div") //列出所有同级
console.log(tb)
</script>
测试账号