对于很多初学者刚接触jQuery对象和DOM对象时会感到很困惑,时不时把他们搞混,那他们之间有什么关系,又有什么区别呢?
一、概念
(1)什么是jQuery对象
在jQuery库中,可以通过本身自带的方法获取页面DOM元素的对象叫做JQuery对象。
(2)什么是DOM对象
DOM是以层次结构组织的节点或信息片断的集合。文档对象模型(Document Object Model)是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
![50e17a697910972fc5e38a93bd3347be.png](https://i-blog.csdnimg.cn/blog_migrate/5567078ae27792f87ed243470e153a29.jpeg)
HTML DOM 模型被构造为对象的树
二、DOM对象与jQuery对象的区别:
DOM对象是使用JavaScript传统方法获得的对象,jQuery对象是用jQuery封装的库选择器得到的对象
a.DOM对象获得方式
- var demo = document.getElementById("demo");
b.jQuery对象获得方式
- var $demo = $("#demo");
在jQuery对象中不能使用DOM对象的方法和属性,同样DOM对象不可以使用jQuery对象的方法。如果jQuery类库中没有封装我们想要的方法,那如何解决呢?这时我们可以通过下面的方法来处理。
三、jQuery对象与DOM对象的相互转换
(1) jQuery对象转换成DOM对象
方式一:利用数组下标的方式读取jQuery中的DOM对象
$("#demo")[0].onclick = function () { alert("jQuery对象转换DOM对象");}
方式二:通过jQuery自带的get()方法获得jQuery中的DOM对象
$("#demo").get(0).onclick = function () { alert("jQuery对象转换DOM对象");}
(2) DOM对象转换成jQuery对象
var demo = document.getElementById("demo");$(demo).click(function () { alert("我是从DOM对象转换过来的");});