层级选择器
- 后代选择器
语法: $(“A B”)选择A元素内部的所有B元素 - 子选择器
语法: $(“A > B”)选择A元素内部的所有B子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery层级选择器</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
#div1{
background-color: red;
height: 100px;
width: 100px;
}
#div2{
background-color: red;
height: 100px;
width: 100px;
}
#div3{
background-color: red;
height: 50px;
width: 50px;
}
</style>
<script>
$(function () {
$("#b1").click(function () {
$("body div").css("backgroundColor","green");
})
$("#b2").click(function () {
$("body > div").css("backgroundColor","blue");
})
})
</script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...
<div id="div3">div3...</div>
</div>
<input type="button" id="b1" value="改变body内div的颜色">
<input type="button" id="b2" value="改变body子div的颜色">
</body>
</html>