JQuery对象与JS对象的转换

最新推荐文章于 2024-07-26 20:46:33 发布

you4580

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量262

点赞数 1

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/you4580/article/details/129692086

版权

文章目录
1.JQuery快速入门
2.JS对象和JQuery对象的转换
2.1 js对象转换为 jquery对象
2.2 将jquery对象转换为js对象

1.JQuery快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
</body>
<script>
    //使用JQuery获取元素对象
    var div1  = $("#div1");
    //获取标签体的内容
    alert(div1.html())

    var div2 = $("#div2");
    alert(div2.html());
</script>
</html>

2.JS对象和JQuery对象的转换

2.1 js对象转换为 jquery对象

js–>jquery:${js对象}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
    <script>
        //1.通过js方式获取名称div的所有html元素对象
        var divs = document.getElementsByTagName("div");
        //将标签体内容改为aaa
        for(var i=0;i<divs.length;i++){
            // divs[i].innerHTML="aaa";
            //将js对象放入$()中即为jquery对象
            $(divs[i]).html("ccc");
        }
    </script>
</body>
</html>

2.2 将jquery对象转换为js对象
jquery–>js:juery对象[索引]或者jquery对象.get(索引)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
    <script>
        //2.通过JQuery的方式获取名称div的所有html元素对象
        var $divs = $("div");
        //将标签体内容改为bbb
        $divs.html("bbb");
        $divs[0].innerHTML="ddd";
        $divs[1].innerHTML="eee";
    </script>
</body>
</html>