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文档对象模型，用来操作文档的；如下图：
例如以下代码，得到的就是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>浏览器控制台打印结果：
PS：以上内容收集自网络，并由飞鸟慕鱼博客整理，如有不对的地方，请留言处指正。