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