DOM对象与jQuery对象相互转换

对于很多初学者刚接触jQuery对象和DOM对象时会感到很困惑，时不时把他们搞混，那他们之间有什么关系，又有什么区别呢？

一、概念

(1)什么是jQuery对象

在jQuery库中，可以通过本身自带的方法获取页面DOM元素的对象叫做JQuery对象。

(2)什么是DOM对象

DOM是以层次结构组织的节点或信息片断的集合。文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

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对象的相互转换

①jQuery对象转换成DOM对象

方式一:利用数组下标的方式读取jQuery中的DOM对象

$("#demo")[0].onclick = function () {
alert("jQuery对象转换DOM对象");
}

方式二:通过jQuery自带的get()方法获得jQuery中的DOM对象

$("#demo").get(0).onclick = function () {
alert("jQuery对象转换DOM对象");
}

②DOM对象转换成jQuery对象

var demo = document.getElementById("demo");
$(demo).click(function () {
alert("我是从DOM对象转换过来的");
});