选择器 名称 举例
后代选择器 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>