当我们在学习jquery基础的时候,就会遇到一个问题,jQuery对象与dom对象的转换的问题,当初自己是新手,开始学习前端知识的时候,也有迷惑,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。在QQ群经常也有一些新手在学习的时候也犯过这样的迷惑,经常把jQuery对象与dom对象里的方法,相互使用不对的情况。比如:为什么$(“#id”)不能直接innerHTML,因为jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是jquery对象,它不能使用js中的dom方法。所以,如果jquery对象要使用标准的dom方法,就需要进行对象转换。

   那么,首先我们先来介绍一下jQuery对象
什么是jQuery对象?
—就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。
比如:
$(“#yuan”).html() 意思是指:获取id为yuan的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码:
document.getElementById(“id”).innerHTML;

    虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。比如:$(“#id”).innerHTML、document.getElementById(“id”).html()之类的写法都是错误的。

还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById(“id”)得到的DOM对象,这两者并不等价。。

    显然,通过上面我们说的,可以知道只有jquery对象才能使用jquery定义的方法,DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
因为dom对象和jquery对象是有区别的,所以我们在调用方法时一定要注意操作的是dom对象还是jquery对象。

不过,jQuery对象与DOM对象其实也可以相互转换的,请看下面
jQuery对象与dom对象的转换

    那么在两者转换前首先我们给一个约定:如果一个获取的是 jQuery对象,那么我们在变量前面加上$,如:var $yuan = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var yuan= DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。

1、Jquery对象转换成dom对象

第一种方法:jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。

Var $yuan=$(“#id”);//jquery对象

Var yuan=$yuan[0];//dom对象

第二种方法:通过jQuery本身提供的.get(index)方法,得到相应的DOM对象

Var $yuan=$(“#id”);//jquery对象

Var yuan=$yuan.get(0);//dom对象

2、DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。

如:var yuan=document.getElementById(“id”); //DOM对象

var $yuan=$(yuan); //jQuery对象

转换后,我们就可以任意使用jQuery的方法了。