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里边的方法。比如下边两个代码是等价的:
<div id="x">test</div>
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方法
<div id="x">test</div>
var div1 = document.getElementById('x')
$(div1).css('color','red')
2.jQuery转DOM
方法一:jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
<div id="x">test</div>
var $div = $('#x')
var d = $div[0]
d.innerHTML = 'hi' //hi
方法二:jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
<div id="x">test</div>
var $div = $('#x')
var d = $div.get(0)
d.innerHTML = 'hello' //hello
网友评论