欢迎来到飞鸟慕鱼博客,开始您的技术之旅!
当前位置: 首页前端设计正文

JQuery对象与dom对象两者之间的相互转换

墨初 前端设计 3319阅读

jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程。但是在 JQuery 中,有些 javascript 方法却不能直接使用。如何解决这个问题呢?接下来就讲述一下 jquery 对象和 javascript 里的dom对象之间互相转换的方法,使 jquery 对象可以直接使用js里的方法,或 javascript 里的 dom 对象使用 jquery 里的方法.

什么是 jquery 对象

jquery对像:通常是指 jquery 选择器选中的目标

例如以下代码,jquery内置方法获取的一个DOM对象

$('#mochu') 
$(".mochu")

这种方法得到的就是 jquery 对象

注:

1、jQuery方法若返回节点也是 jquery 对象

2、jQuery赋值的方法返回的也是 jquery 对象

dom对象

dom对象:是 javascript 的外部对象,由浏览器提供的,可以直接访问、操作整个网页的文档

dom文档对象模型,用来操作文档的;如下图:

QQ截图20190729110649.jpg

例如以下代码,得到的就是DOM对象

document.getElementById("mochu"):

对像的方法

jquery对象和dom对象是不一样的,它们所使用的方法也不一样,比如想要得到某个元素下的HTML内容,它们所使用的方法如下:

1、DOM对象的方法

document.getElementById("mochu").innerHTML;

2、jquery对像的方法

$("#mochu").html();

dom对象转换为jquery对象

通常情况下,直接使用 $() 方法就可以把DOM对像转成 jquery 对象

转换代码:

$(document.getElementById("mochu"))

使用方法举例:

$(document.getElementById("mochu")).html()

jquery对象转换成dom对象

方法1:

使用 jquery 中的内置函数 get

转换代码:

$('#mochu').get(0)

使用方法举例:

$('#mochu').get(0).innerHTML;

方法2:

因为 jquery 对象的属性是一个数组的集合,我们可以像操作数组一样,取出其中的一项就行了

转换代码

$('#mochu')[0]

使用方法举例:

$('#mochu')[0].innerHTML;

代码举例说明:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">
    <p>飞鸟慕鱼博客</p>
</div>
<script>
    //jquery 对像方法
    console.log($('#mochu').html());
    //dom 对像的方法
    console.log(document.getElementById('mochu').innerHTML);
    //DOM对像转JQuery对像
    console.log($(document.getElementById('mochu')).html());
    //JQuery对像转DOM
    console.log($('#mochu').get(0).innerHTML);
    console.log($('#mochu')[0].innerHTML);
</script>
</body>
</html>

浏览器控制台打印结果:

QQ截图20190729113020.jpg

PS:以上内容收集自网络,并由飞鸟慕鱼博客整理,如有不对的地方,请留言处指正。

声明:无特别说明,转载请标明本文来源!