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

最新推荐文章于 2024-12-27 17:19:03 发布

原创最新推荐文章于 2024-12-27 17:19:03 发布 · 260 阅读

1 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在JavaScript中将原生JS对象转换为jQuery对象，以及如何将jQuery对象转换回原生JS对象的方法，并通过具体示例展示了两种转换方式及其应用场景。

<!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(索引值)