看jQuery与dom对象的区别

var div = document.getElementById('x')  //1
var $div = $('#x')  //2

请说出 div 和 $div 的联系和区别。

一、区别：

div是dom对象，$div是一个jquery对象
div的原型链为：div->HTMLDivElement->HTMLElement->Element
$div的原型链为：$div0->jQuery.prototype

jQuery对象是什么意思呢？

就是通过jQuery包装DOM对象后产生的对象，是jQuery独有的，可以使用jQuery里边的方法。比如下边两个代码是等价的：

test

var div = document.getElementById('x')
var $div = $('#x')

在这里，div作为DOM对象不能使用jQuery里边的方法，同样的$div作为jQuery对象，也不能使用DOM方法。

jQuery的方法有：text(), html(), val(), attr(), append(), prepend(),after(), before(), remove(),addClass(), removeClass(), toggleClass()等等...

DOM方法有：getElementById(), getElementByTagName(), appendChild(), removeChild(), createAttribute()等

二、转化

1.DOM转jQuery

只需要用$()将DOM对象包装起来就可以～下来就可以使用jQuery方法

test
var div1 = document.getElementById('x')
$(div1).css('color','red')

---

2.jQuery转DOM

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

test
var $div = $('#x')
var d = $div[0]

d.innerHTML = 'hi'  //hi

方法二：jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

test
var $div = $('#x')
var d = $div.get(0)

d.innerHTML = 'hello'  //hello