jquery中的DOM对象和js中的DOM对象的相互转化

本文链接：https://blog.csdn.net/chcfner/article/details/79498820

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(document).ready(function() {
            var box = document.getElementsByClassName("box")[0];
            var jqBox1 = $(".box1");
            var jqBox2 = $(".box2");
            //js对象转换为jquery对象方法：
            box = $(box);
            //转化后可以调用jquery的API;
            box.css({
                "width":"100px",
                "height":"100px",
                "background":"red"
            })

            //jquery对象转换为js对象,转化后可以调用原生js属性：
            //方法一：
            jqBox1[0].style.width = "100px";
            jqBox1[0].style.height = "100px";
            jqBox1[0].style.backgroundColor = "lightblue";
            //方法二：
            jqBox2.get(0).style.width = "100px";
            jqBox2.get(0).style.height = "100px";
            jqBox2.get(0).style.backgroundColor = "#45b6f7";
        })
    </script>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

总结：js对象转化为jquery对象：$(js对象)

jquery对象转化为js对象：jquery[索引值] 或者 jquery对象.get(索引值)