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:以上内容收集自网络,并由飞鸟慕鱼博客整理,如有不对的地方,请留言处指正。