12月19号作业

1、写出课堂上讲解的jquery 的6个选择器，并说明其含义

2、每个选择器至少写一个示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery案例</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style type="text/css">
        .mydiv{padding: 10px;margin: 10px}
    </style>
</head>
<body>
<div class="mydiv" style="background: #000;" id="div_black" >黑色</div>
<div class="mydiv" style="background: #FF0000;" id="div_red" >红色</div>
<div class="mydiv" style="background: #00ff00;" id="div_green" >
    <p id="a">div中的p标签</p>
    <div>
        <p id="b">div中的div的p标签</p>
        <p id="c">p3</p>
    </div>
    <p id="d">pd</p>
    <div style="background: yellow">第二个div</div>
</div>
<p id="4">我是p标签</p>
<script type="text/javascript">
    // 通过id选择器来选择,仅选取第一个,id的唯一性
    var div1=$('#div_red');
    console.log(div1);
    // 通过class选择器来选择
    var div2=$('.mydiv');
    console.log(div2);
    // 通过element选择器来选择
    var div4=$('p');
    console.log(div4);
    // 层级选择器-后代选择器（descendant selector ）
    var cj1=$('div p');
    console.log(cj1);
    // 后代选择器（descendant selector ）
    var cj2=$('#div_green  p');  //指定id是div_green 下面的所有p 可读性更好
    console.log(cj2);
    // 层级选择器-子代选择器
    var cj3=$('#div_green>p');
    console.log(cj3);
    // 层级选择器-相邻第一个兄弟选择器
    var cj4=$('p + div');
    console.log(cj4);
    // 层级选择器-后面的所有兄弟选择器
    var cj5=$('#div_black ~ div');
    console.log(cj5);
</script>
</body>
</html>