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