jQuery对象与DOM对象

jQuery对象与DOM对象

对于刚刚接触jQuery库的初学者，我们需要清楚的认识一点：

jQuery对象与DOM对象是不一样

下面我们将通过一个简单的列子，简单区分下jQuery对象与DOM对象：

<p id=”first”></p>

我们要想获取页面上这个id为first的p元素，然后给这个文本节点增加一段文字：“你好，欢迎来到jQuery的世界”,并且让文字颜色变为红色。

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

var p = document.getElementById('first');

p.innerHTML = '您好！欢迎来到jQuery的世界';

p.style.color = 'red';

通过原生DOM模型提供的document.getElementById(“first”方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。

2.jQuery的处理：

var $p = $('#first');

$p.html('您好！欢迎来到jQuery的世界').css('color','red');

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

3.小结：

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

（1）通过jQuery方法包装后的对象，是一个类数组对象，它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

（2）通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有哪些方法，也不需要关系不同游览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。