Go！Go！Go! JQuery对象与DOM对象

希望多多指点，多多指教，欢迎批评，评论区等你！

Javascript中的DOM对象

• 例如：document.getElementByld（“box”）; //（通过id去获取到一个元素，一个id为box的元素称为）DOM对象

jQuery对象

• 在jQuery库中，可以通过本身自带的方法获取页面元素的对象叫做jQuery对象
• $(“.box”);  //jQuery对象

jQuery DOM 元素方法

函数	描述
.get()	获得由选择器指定的 DOM 元素。
.index()	返回指定元素相对于其他指定元素的 index 位置。
.size()	返回被 jQuery 选择器匹配的元素的数量。
.toArray()	以数组的形式返回 jQuery 选择器匹配的元素。

DOM对象与jQuery对象的区别

①DOM对象是通过原生是JS获取的对象，DOM对象只能使用JS中的方法和属性。

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

③jQuery可以使用jQuery库里面的方法，但是不能使用JS中的方法。

 

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）;

 

链式写法

$（“#jqBox”）.css(“width”,”400px”).html （这是一个jQuery对象）

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

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

 

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

• 通过jQuery方法包装后的对象，是一个类数组对象，它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
• 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，也不需要我们具体知道哪个DOM节点有哪些方法，
• 也不需要关心不同浏览器的兼容性问题，
• 我们通过jQuery提供的API进行开发，代码也会更加精短