jQuery的基本选择器

最新推荐文章于 2022-01-24 07:00:00 发布

syf_wfl

最新推荐文章于 2022-01-24 07:00:00 发布

阅读量68

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/wflsyf/article/details/112383271

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css" >
            div{
                background: blue;
            }
            .two{
                background: aqua;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="jss/jquery-3.4.1.js"></script>
        <script type="text/javascript">

             function fun1() {
                 let obj=$("#one");
                obj.css("background","red");
            }
            function fun2() {
                let obj1=$(".two");
                obj1.css("background","green");
            }
            function fun3() {
                let obj2=$("div");
                //操作的数组中的全部成员
                obj2.css("background","grey");
            }
            //所有选择器
            function fun4() {
                let obj3=$("*");
                obj3.css("background","yellow");
            }
            //组合选择器
             function fun5() {
                 let oo=$("span,#one")
                 oo.css("background","orange");
             }
        </script>
        <div id="one" >我是onediv</div><br>
        <div class="two">我是twodiv</div><br>
        <div>我啥也没有</div><br>
        <span>我是span</span><br>
        <input type="button" value="获取id是one的dom对象" onclick="fun1()">
        <input type="button" value="使用样式two的dom对象" onclick="fun2()">
        <input type="button" value="使用样式div的dom对象" onclick="fun3()">
        <input type="button" value="全部选择器" onclick="fun4()">
        <input type="button" value="组合选择器" onclick="fun5()">
    </body>
</html>