jQuery学习日记（一）：jQuery 对象与 DOM 对象

本文主要讲解了 jQuery 与 DOM 对象的区别。

首先记住一点： jQuery 就是 JavaScript ，为什么这么说呢，因为 jQuery 就是用 JavaScript 编写封装的框架，所以说本质上这两者是同一种东西，他们的基本语法都是一样的，不要误以为 jQuery 是另外一种前端技术。

然后再谈一下初学者在使用 jQuery 和 JavaScript 时最容易混淆的一点，jQuery 对象不等于 DOM 对象，大部分初学者容易认为 jQuery 对象就是 DOM 对象，其实这两者是不一样的（至少很多方法操作不一样）， jQuery 对象是对于 DOM 对象的封装，使用的方法是 jQuery 当中给出的方法，但是本质上他的底层是 DOM 对象。还有一点需要注意的是 jQuery 对象返回的永远是一个数组，这是与 DOM 操作不一样的地方，在 DOM 操作中 document.getElementById() 会返回一个 DOM 对象，而其他的比如 document.getElementByTagName() 会返回一个数组，但是在 jQuery 中使用 $()  返回的是一个数组，无论你的表达式是指定的 id 还是 tagName。

$() 返回是一个数组，它又是一个 jQuery 对象，数组当中的元素其实就是 DOM 元素，如果该 jQuery 对象当中只有一个元素，那么对 jQuery 对象操作就是对该对象操作：

<p>this is a para</p><script>$("p").text("change");</script>

该操作修改一个 p 标签当中的内容；

如果该 jQuery 对象当中有多个元素，那么对该 jQuery 对象的操作则是对该数组中所有 DOM 元素的操作：

<p>this is a para1</p><p>this is a para2</p><p>this is a para3</p><script>$("p").text("change");</script>

该操作将会修改所有 p 标签当中的内容，如果输出的话，该操作会把数组中所有元素的 text 拼接成一起输出，但是这里有一点不一样的是，如果使用 html() 方法，输出的时候只会输出数组中第一个元素的 html ，但是如果修改的话则会修改所有元素的 html ，具体原因目前还不确定；

如何从返回的数组中取得 DOM 元素？

<p>this is a para1</p><p>this is a para2</p><p>this is a para3</p><script>var p1 = $("p")[0];var p2 = $("p").get(1);</script>

以上两种方法都可以取得 DOM 元素（如果 jQuery 对象中只有一个元素，那么就取[0]），注意这里取得的是 DOM 对象，jQuery 的方法就不可用了；

DOM 对象和 jQuery 对象如何转换？

<script><!-- 取得 DOM 对象 -->var p = $("p")[0];<!-- 将 DOM 对象转化为 jQuery 对象 -->var $p = $(p);</script>

DOM 对象和 jQuery 对象的主要方法区别：

jQuery ：

object.text();

object.html();

DOM:

dom.innerText;

dom.innerHTML;

还有一点就是 jQuery 对象是一个数组，所以不能使用 getAttribute() 方法，要转换成 DOM 对象才能使用。