jQuery对象和dom对象的区别

简介: jQuery对象和dom对象的区别

我们要想知道 jQuery对象 和 DOM对象 的区别就要先知道二者的定义:


DOM对象:原生JS获取过来的对象就是DOM对象


jQuery对象:用 jQuery 的方式获取过来的对象叫 jQuery 对象


例如:var ele=document.querySelector('div') ,这里使用原生 JS 获取过来的的 ele 就是一个 DOM 对象


$('div') ,这里使用 jQuery 获取过来的对象 $('div') 就是一个 jQuery 对象,下面我们使用 console.dir 分别看看二者对象打印出来是什么


DOM对象:

<body>

   <div></div>

   <script>

       var ele=document.querySelector('div')

       console.dir(ele)

   </script>

</body>



jQuery对象:

<body>

   <div></div>

   <script>

       console.dir($('div'))

   </script>

</body>



结论:

      通过上面输出的结果对比我们可以发现,jQuery 对象本质是对 DOM 对象的包装,并以伪数组的形式存储了


注意事项:

jQuery对象只能使用jQuery对象的方法,DOM对象只能使用DOM对象的方法,二者不可混着使用


例如在隐藏元素时:


jQuery:只能使用 jQuery 特有的 hide 方法


<script>

       $('div').hide();

</script>

DOM:只能使用 style 的 display


<script>

      var div=document.querySelector('div');

      div.style.display='none';

</script>

DOM对象 和 jQuery 对象的相互转化:

相互转化的目的:jQuery对象的方法并没有DOM对象多,有些jQuery对象做不到的事情DOM对象却可以做得到,例如视频的播放 play(),因此需要二者的相互转化


DOM对象 转化为 jQuery对象:


直接将获取好的DOM对象放入$内进行包装即可


格式:$('DOM对象')


<div></div>

<script>

      var ele=document.querySelector('div');

      $('ele')

</script>

注意:直接获取得到的就是 jQuery 对象:$('div')


jQuery对象 转化为 DOM对象:


两种格式:(index 为索引号,因为 jQuery 对象以伪数组形式存储,有索引值)


$( 'element' )[ index ]

$( 'element' ).get( index )

<div></div>

<script>

      $('div')[0]

</script>

<div></div>

<script>

     $('div').get(0)

</script>


相关文章
|
29天前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
45 0
|
28天前
|
JavaScript 前端开发 算法
真实DOM和虚拟DOM有哪些区别?
本文介绍了真实DOM和虚拟DOM的概念、使用方式、优势、劣势、使用场景、影响因素、开发效率和性能对比。真实DOM是浏览器提供的原生接口,直接操作简单直观,但频繁操作会导致性能损耗。虚拟DOM是真实DOM的抽象表示,通过比较差异减少DOM操作,适用于大规模数据变更和复杂交互的页面。开发者应根据具体需求选择合适的DOM操作方式,以提高页面性能和开发效率。
63 1
真实DOM和虚拟DOM有哪些区别?
|
20天前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
29天前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
15 0
|
3月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
21 1
js之DOM 文档对象模型
|
3月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
52 1
|
3月前
|
JavaScript 前端开发 API
前端开发者的救赎:揭秘JQ对象与DOM元素的神秘转换术
【8月更文挑战第23天】在Web前端开发领域,jQuery(简称JQ)作为一款流行的JavaScript库,极大简化了HTML文档遍历、事件处理、动画及Ajax交互等操作。理解和掌握jQuery对象与DOM元素间的转换至关重要。
41 0
|
3月前
|
XML JavaScript API
DOM 和 SAX 解析器之间的区别
【8月更文挑战第22天】
43 0