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>


相关文章
|
26天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
12 1
js之DOM 文档对象模型
|
16天前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
33 1
|
15天前
|
JavaScript 前端开发 API
前端开发者的救赎:揭秘JQ对象与DOM元素的神秘转换术
【8月更文挑战第23天】在Web前端开发领域,jQuery(简称JQ)作为一款流行的JavaScript库,极大简化了HTML文档遍历、事件处理、动画及Ajax交互等操作。理解和掌握jQuery对象与DOM元素间的转换至关重要。
25 0
|
16天前
|
XML JavaScript API
DOM 和 SAX 解析器之间的区别
【8月更文挑战第22天】
14 0
|
16天前
|
XML JavaScript Java
Java 中 DOM 和 SAX 解析器之间的区别
【8月更文挑战第22天】
12 0
|
23天前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
24 0
|
23天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
2月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
22 0
|
2月前
|
JavaScript
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
34 0
|
3月前
|
JavaScript 前端开发 API
jQuery对象与DOM对象简介及相互转换
jQuery对象与DOM对象简介及相互转换