JS第4课-jquery演示和选择器-九期线上班

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery演示</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" class="class1" style="background-color: red">
    <p id="p1" class="c1">1</p>
    <p id="p2" class="c2">2</p>
</div>
<div id="div2" class="class1" style="background-color: green">
    <p id="p3" class="c3">3</p>
    <ul>
        <li>12</li>
        <li>11</li>
        <li> <p id="p7" class="c7">8</p></li>
    </ul>
</div>
<p id="p6" class="c6">6</p>
<div id="div3" class="class3" style="background-color: blue">
    <p id="p5" class="c5">5</p>
</div>
<div id="div4" class="class4" style="background-color: orange">
    <ul>
        <li>12</li>
        <li>11</li>
        <li> <p id="p4" class="c4">4</p></li>
    </ul>
</div>
<!--/***********JS**********/-->
<script>
    //id选择器
    var div1 = $("#div1");
    console.log(div1);
    var p2 = $("#p2");
    console.log(p2);
    //类选择器
    var class1 = $(".class1");
    console.log(class1);
    var c3 = $(".c3");
    console.log(c3);
    //通配符选择器
    var div = $("div");
    console.log(div);
    var p = $("p");
    console.log(p);
    //后代选择器
    var div2 = $("div p");
    console.log(div2);
    var p3 = $("ul li");
    console.log(p3);
    //子类选择器
    var div3 = $("#div2 > p");
    console.log(div3);
    var pp = $("body > p");
    console.log(pp);
    //后面一个
    var g = $("#div2 + p");
    console.log(g);
    var h = $("#div3 + p");
    console.log(h);
    //后面的所有
    var t = $("#div1 ~ div");
    console.log(t);
    var s = $("#p1 ~ p");
    console.log(s);
</script>
</body>
</html>

总结
今天学习了jquery，jquery就是封装好的js类库，大大的简化了代码。然后学习了jquery的选择器，和css的一样。

相关文章