jQuery对象与js对象相互转换

最新推荐文章于 2024-05-08 11:10:06 发布

GodGump

最新推荐文章于 2024-05-08 11:10:06 发布

阅读量682

点赞数

分类专栏： html复习

本文链接：https://blog.csdn.net/GodGump/article/details/113887131

版权

html复习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

转换的原因简单说下：虽然jQuery是js的封装和改进版，但是jQuery返回的大多是jQuery的对象（去看API发现是个伪DOM数组，每个jQuery对象可以看成多个DOM的组合体，但很多DOM的方法却不可以使用），而js则以DOM为主。
jQuery 对象转成 DOM 对象
两种转换方式将一个jQuery对象转换成js对象：[index]和.get(index); （脱马甲）
js对象转成jQuery对象:
只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了（穿马甲）
注意：jQuery不能使用dom对象的属性和方法，虽然有些浏览器和编译器不报错
举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>-->
<!--    <script>-->
<!--        var test = document.getElementById("testDiv");-->
<!--        test.innerHTML = "js改变的效果";-->
<!--        var test2 = $("#testDiv2");-->
<!--        test2.html("jQuery改变的效果");-->
<!--    </script>-->
</head>
<body>
<div id="testDiv"> js的DIV </div>
<div id="testDiv2"> jQuery的DIV </div>
<script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
<script>
    var test = document.getElementById("testDiv");
    alert( test.innerHTML.toString() );
    var test2 = $("#testDiv2");
    alert( test2.html().toString() );

    //jQuery转dom要脱马甲
    var transToJs = test2.get(0);
    transToJs = test2[0];
    transToJs.innerHTML();
    //dom转jQuery要穿马甲
    var transToJquery = $(test2);
    alert( transToJquery.html() );

</script>
</body>
</html>

效果图：
在这里插入图片描述

GodGump

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对象与js对象相互转换

转换的原因简单说下：虽然jQuery是js的封装和改进版，但是jQuery返回的大多是jQuery的对象，而js则以DOM为主。两种转换方式将一个jQuery对象转换成js对象：[index]和.get(index);
复制链接

扫一扫