文章目录
  1. 1. 区别
  2. 2. 转化
    1. 2.1. JQuery => Dom
    2. 2.2. Dom => JQuery

最近的项目中在使用jsonEditor的时候,其中有一行代码是

var container = document.getElementById('editor');

但是我整体js代码都是使用JQuery的,想要将这个代码改成JQuery形式:

var container = $('#editor');

但是这样却发现,可以获取到container对象,但是却不能正常生成jsonEditor。

和mentor反应了问题之后,他将代码改成了

var container = $('#editor')[0];

项目就可以正常运行了,并让我去查一下JQuery对象和Dom对象的区别。

区别

DOM对象是我们用传统的方法(javascript)获得的对象,jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法。如:

var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;

$("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法;

等同于:

document.getElementById("foo").innerHTML;

DOM对象就是javascript固有的一些对象。DOM对象能使用javascript固有的方法,但是不能使用jQuery里面的方法。同样,jQuery对象中也无法使用DOM对象的任何方法。

转化

JQuery => Dom

jquery对象是一个数组对象,可以使用[index]或get(index)将其转化为Dom对象。

var $obj = $("#id"); //jQuery对象;
var o = $obj[0];  //Dom对象 也可写成 var o = $obj.get(0);

Dom => JQuery

对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象).

var domObj = document.getElementById("id"); //DOM对象
var $obj = $(domObj);  //JQuery对象

平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂.

建议:如果获取的对象是 jquery对象,那么在变量前面加上$,这样方便容易识别出哪些是jquery对象

文章目录
  1. 1. 区别
  2. 2. 转化
    1. 2.1. JQuery => Dom
    2. 2.2. Dom => JQuery