jQuery中的$()和javascript中的getElementById()之间的区别

jQuery的成功多归功于其强大的选择器。

然而，相信不少初学jQuery的同学都会遇到下面的问题。

在javascript下，我们可以根据getElementById()来获取页面元素。如下：

var oDiv1 = document.getElementById("divId");

用jQuery就方便多了：

var oDiv2 = $("#divId");

一般我们会认为，这两个东西返回的都是一个ID为"divId"的页面元素对象。但是事实上，这两种东西是不同的：

alert(oDiv1); //返回”[object HTMLDivElement]“
alert(oDiv2); //返回”[object object]“

可以看出oDiv1确实是一个页面元素对象，但是oDiv2又是什么对象呢？

oDiv1.innerHTML = "111" ; //生效
oDiv2.innerHTML = "111" ; //不生效，证明oDiv2不是指id为”divId“的页面元素

我们再通过浏览器控制台来看一下它们分别是什么：

> oDiv1
< <div id="divId">
> oDiv2
< [<div id="divId">]

可以看出oDiv2其实是个数组对象！

事实上，jQuery选择器返回的都是数组对象，数组里面才会放置页面元素对象，而getElementById()返回的就是一个页面元素对象。

所以当我们要对像oDiv2进行操作的时候，就要这样：

oDiv1.innerHTML = "111" ; //生效
oDiv2[0].innerHTML = "111" ; //生效

//实际上 oDiv1 = oDiv2[0]