前端第十四课：javascript基础3-PHP培训九期线上班

一、写出课堂上讲解的jquery 的6个选择器，并说明其含义，每个选择器至少写一个示例，作业发到博客上

选择器

<div class="mydiv" style="background: #000;" id="div_back">黑色</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>

ID选择器

根据$(‘#ID值’)选择

<script type="text/javascript">
    var div = $('#div_back');
    console.log(div);
</script>

类选择器

根据$(‘.类名称’)选择

<script type="text/javascript">
    var div = $('.mydiv');
    console.log(div);
</script>

后代选择器

选择指定ID为div_green下的所有p标签

<script type="text/javascript">
    var div = $('#div_green p');
    console.log(div);
</script>

子代选择器

选择指定ID为div_green下的所有子代为p标签

<script type="text/javascript">
    var ps = $('#div_green > p');
    console.log(ps);
</script>

相邻选择器

选择紧跟在p标签后面的一个平级div

<script type="text/javascript">
    var div = $('p + div');
    console.log(div);
</script>

兄弟选择器

选择与ID为div_back之后的所有平级的div标签

<script type="text/javascript">
    var div = $('#div_back ~ div');
    console.log(div);
</script>