jQuery对象与DOM对象的区别

jQuery对象与DOM对象

1:对于才开始接触jQuery库的初学者，我们需要清楚认识一点：

jQuery对象与DOM对象是不一样的

2:可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。

通过一个简单的例子，简单区分下jQuery对象与DOM对象：

<p id=”imooc”></p>

3:我们要获取页面上这个id为imooc的div元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。

普通处理，通过标准JavaScript处理：

var p = document.getElementById("imooc");
p.innerHTML = "您好！通过慕课网学习jQuery才是最佳的途径";
p.style.color = "red";

4:通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是DOM对象，通过DOM方法将自己的innerHTML与style属性处理文本与颜色。

jQuery的处理：

var $p = $("#imooc");
$p.html("您好！通过慕课网学习jQuery才是最佳的途径").css("color","red");

5:通过$("#imooc")方法会得到一个$p的jQuery对象，$p是一个类数组的对象这个对象里面其实是包含了DOM对象的信息的然后封装了很多操作方法，调用自己的方法html与css处理，得到的效果与标准的JavaScript处理结果是一致的。

通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：

1. 通过jQuery方法包装后的对象，是jQuery对象，它是一个新的对象
2. jQuery与DOM对象完全不是同一个东西，但是又似曾相似，因为他们都能处理DOM
3. 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容问题，我们可以通过jQuery更友好的API进行开发，同时代码也会更加精短