JQuery-01

最新推荐文章于 2022-07-24 23:26:28 发布

xlh006

最新推荐文章于 2022-07-24 23:26:28 发布

阅读量103

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/xlh006/article/details/83443133

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>haohao</title>
    <link rel="stylesheet" href="">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width:100px;
            height:100px;
            border:1px solid #000;
        }

    </style>
    <script src="../js/jQuery-3.3.js"></script>
    <script>
        window.onload = function (ev){
            //1.利用原生的JS查找元素
            var div1 = document.getElementsByTagName("div")[0];
            var div2 = document.getElementsByClassName("box1")[0];
            var div3 = document.getElementById("box2")[0];
            // console.log(div1);
            // console.log(div2);
            // console.log(div3);
            //

            //2.利用原生的JS修改背景颜色
            // div1.style.backgroundColor = "red";
            // div2.style.backgroundColor = "blue";
            // div3.style.backgroundColor = "yellow";


        }

        $(function(){
            var $div1 = $("div");
            var $div2 = $(".box1");
            var $div3 = $("#box2");

            // console.log($div1);
            // console.log($div2);
            // console.log($div3);
            //

            $div1.css({
                background:"red",
                width:"200px",
                height:"200px"
            });
            $div2.css({
                background:"blue"
            });
            $div3.css({
                background:"yellow"
            })

        })

    </script>



</head>
<body>

    <div></div>
    <div class="box1"></div>
    <div id="box2"></div>

    <script src="../js/jQuery-3.3.js"></script>

</body>
</html>

同种功能用JQuery跟原生的js实现，从而更清晰的比较优劣！

xlh006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery-01

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;haohao&lt;/
复制链接

扫一扫

专栏目录