jquery和jsDom的区别和转换

浅浅的花香味﹌ 2022-07-14 00:40 142阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script src="jquery-1.11.1.js"></script>
    <script>
    //----------------------------jquery中的Dom对象和js中的dom对象区别和联系----------------------//
            //入口函数
            $(document).ready(function(){
                //jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
                var jqbox = $("#box");
                var jqCbox = $(".box");
                var jqdiv = $("div");
    
                console.log(box);
                console.log(jqbox);
                console.log("------------");
                console.log(cbox);
                console.log(jqCbox);
                console.log("------------");
                console.log(div);
                console.log(jqdiv);
                //原生js中没有css();
                //            div.css("width: 100px;height:100px;background-color:red;margin:10px;");
    
                //jquery中有css();  原因就是因为：jquery有一层功能皮肤。可以理解相当于js套了一层皮肤
                jqdiv.css({"width": 100,"height":100,"background-color":"red","margin":10});
    
    
    
    //---------------------------------jquery中DOM对象和js中DOM对象的转换--------------------------------//
                //如果想要那种方式设置属性或方法，必须转换成该种类型 。
                    
                //1.js对象转换成jquery对象    $(js对象);
                //2.jquery对象转换成js对象    1).jquery对象[索引值]   2).jquery对象.get(索引值)
    
                //jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
                    //获取相关元素js写法
                var box = document.getElementById("box");
                var cbox = document.getElementsByClassName("box");
                var div = document.getElementsByTagName("div");
                    //获取jquery相关对象
                var jqbox = $("#box");
                var jqCbox = $(".box");
                var jqdiv = $("div");
    
                console.log(box);
                console.log(jqbox);
                console.log("------------");
                console.log(cbox);
                console.log(jqCbox);
                console.log("------------");
                console.log(div);
                console.log(jqdiv);
    
                //转换成jquery对象
                box = $(box);
                cbox = $(cbox);
                div = $(div);
    
                console.log(box);
                console.log(jqbox);
                console.log("------------");
                console.log(cbox);
                console.log(jqCbox);
                console.log("------------");
                console.log(div);
                console.log(jqdiv);
    
                //转换成了jquery对象，皮上面有功能可以直接调用。
                div.css({"width": 100, "height": 100, "border": "1px solid red"});
                box.css("background", "red");
                cbox.css("background", "yellow");
            });
    
    
    </script>
        <div></div>
        <div class="box"></div>
        <div id="box"></div>
        <div class="box"></div>
    <div></div>
    </body>
    </html>