document.getElementById(‘idName’)与 $('#idName')的区别
问
<div id=xxx></div>
-----------------------------
var div = document.getElementById('xxx');
var $div = $('#xxx');
复制代码
请说出div与$div的联系和区别?
答
首先,div是一个DOM对象,$div
则是一个jQuery
对象,而jQuery
的本质就是一个JavaScript函数。可以使用typeof jQuery
或是typeof $
查看返回值,返回值为'function'
。 其实,jQuery
就是将一些常用的(反人类的)DOM API进行封装,方便我们调用,所以jQuery对象其实就是通过jQuery包装DOM对象后产生的对象 。 我们可以使用$div[0]
或者是$div.get(0)
将jQuery转换为DOM对象;当然也可以将DOM对象转换为jQuery对象:$(div)
。相比于DOM API,jQuery提供的属性与方法更加人性化,如向元素添加,删除class。DOM API提供的方法为:
div.classList.add();
div.classList.remove();
复制代码
而jQuery则是这样:
$div.addClass();
$div.removeClass();
复制代码
并且jQuery支持链式操作如:
$div.removeClass('green').addClass('red')
复制代码
jQuery不仅仅有对DOM操作的支持,而且还有动画,AJAX等模块,且兼容性也很好。但是了解了jQuery的本质后,我们知道jQuery能做的事情,JS也能做,但是JS能做的事情,jQuery则不一定能做。