DOM对象与jQuery对象的区别

DOM对象：使用JavaScript的方法获取的对象就是DOM对象。

JQuery对象：使用jQuery的方法获取的对象就是jQuery对象。

小提示：DOM = Document Object Model（文档对象模型）

Javascript中的DOM对象

例如：document.getElementByld（“box”）; //（通过id去获取到一个元素，一个id为box的元素称为）DOM对象，而js中的getElementsByTagName是通过获取元素节点得到的。

jQuery对象

在jQuery库中，可以通过本身自带的方法获取页面元素的对象叫做jQuery对象。

例如下面这个就是jQuery对象：

$(“.box”);  //jQuery对象

 

两者的区别

1.JS对象只能调用JS中提供的方法和属性，不能使用jQuery中的方法和属性。

 

2.jQuery对象只能使用jQuery的方法和属性，不能使用JS提供的方法属性。

 

3．DOM对象是通过原生是JS（JavaScript）获取的对象，再通过inner HTML与style属性处理文本和颜色，所以它只能使用JS中的方法和属性。

 

4.jQuery对象是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQyery独有的。

 

5.jQuery可以使用jQuery库里面的方法，但是不能使用JS（/DOM）中的方法。

 

JS中Windows.onload

Windows.οnlοad=function（）{

var box=document.getElementById（“box”）；// js中的DOM对象

console.log（box）;

}

jQuery中页面加载事件

$（document）.ready（function（）{

var $box=$（“#jqBox”）; // jQuery中的对象

}）

console.log（$box）;

 

下面是jQuery DOM  元素方法：

链式写法

$（“#jqBox”）.css(“width”,”400px”).html

（这是一个jQuery对象）

 

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

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

通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，也不需要我们具体知道哪个DOM节点有哪些方法，

也不需要关心不同浏览器的兼容性问题，

我们通过jQuery提供的API进行开发，代码也会更加精短。

 

扩展：链式操作

原理：在每个方法调用后（结束后）返回了this。

方法链中每个节点都返回当前对象。

也有人说，链式操作就是分步骤地对jQuery对象实现各种操作。

为什么要使用链式操作？

1. 代码更精简。链式操作能够大大精简代码量，多项操作一行代码搞定。
2. 优化性能。使用链式操作，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。

JQuery主要对DOM元素的操作，所以只需要改变DOM元素，而不需要返回值，因此，jQuery适合链式操作。

在扩展一下：

C++中的链式操作：

是利用运算符进行的连续运算（操作）。

特点：是在一条语句中出现两个或两个以上相同的操作符，比如，赋值操作、连续输入（输出）的操作、连续的相加操作等都是链式 操作的样例。

链式操作一定涉及到结合律，比如，链式操作赋值操作满足右结合律，而链式输出满足左结合律。