JQuery对象和DOM对象的区别

心已赠人 2021-09-14 01:46 463阅读 0赞

一.分析JQuery对象和DOM对象的区别

首先DOM对象是我们用传统的方法（[JavaScript][]）获得的对象，jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；

DOM对象就是[javascript][JavaScript]固有的一些对象。DOM对象能使用javascript固有的方法，但是不能使用jQuery里面的方法。

通过一个简单的例子，简单区分下jQuery对象与DOM对象：

<div id="demo"></div>

我们要获取页面上这个id为demo的div元素，然后给这个文本节点增加一段文字：“hello,欢迎学习jQuery对象与DOM对象区别！”，并且让文字颜色变成红色。

**通过标准JavaScript处理：**

var div_demo = document.getElementById('deno');//Dom对象
    div_demo.innerHTML = 'hello,欢迎学习jQuery对象与DOM对象区别!';
    div_demo.style.color = 'red';

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

**jQuery的处理：**

var $p = $('#demo');//jquery对象
    $p.html('hello,欢迎学习jQuery对象与DOM对象区别').css('color','red');

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

二.jQuery对象和DOM对象的相互转换

1.jQuery对象转化成DOM对象

**两种转换方式将一个jQuery对象转换成DOM对象：\[index\]和.get(index); **

(1)jQuery对象是一个数据对象，可以通过\[index\]的方法，来得到相应的DOM对象。   
如：var $v =$("\#v") ; //jQuery对象

var v=$v\[0\]; //DOM对象

v.style.color = 'red' //操作dom对象的属性

这里需要注意的一点是，**数组的索引是从0开始的，也就是第一个元素下标是0**

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象   
如：var $v=$("\#v"); //jQuery对象

var v=$v.get(0); //DOM对象  
v.style.color = 'red' //操作dom对象的属性

2.DOM对象转成jQuery对象

对于已经是一个DOM对象，**只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。****$(DOM对象) **

如：var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

$v.css('color','red');  
转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：**DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。 **

[JavaScript]: http://lib.csdn.net/base/javascript

发表评论取消回复

表情：

评论列表（有 0 条评论，463人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery对象和DOM对象转化

jQuery对象和DOM对象；这是我第一个碰到的问题。 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQue

迷南。/ 2022年07月10日 18:28/ 0 赞/ 230 阅读

相关 Dom对象,js对象和jquery对象的区别

第一篇写的很详细可惜不能转载，记下地址： [https://blog.csdn.net/kuangdacaikuang/article/details/72235747][h

痛定思痛。/ 2022年05月26日 00:56/ 0 赞/ 273 阅读

相关 jQuery对象和DOM对象

第一次学习jQuery，经常分辨不清哪些是jquery对象、哪些是DOM对象，因此需要重点了解jQuery对象和DOM对象以及它们之间的关系。一、DOM对象和jQ

小咪咪/ 2022年05月17日 10:26/ 0 赞/ 271 阅读

相关 DOM对象和js对象以及jQuery对象的区别

一、DOM对象文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。 1. DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改

迷南。/ 2022年05月17日 09:53/ 0 赞/ 262 阅读

相关 DOM对象、js对象、jQuery对象的区别

DOM对象和js对象以及jQuery对象的区别一、DOM对象文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。 1. DOM实际上是以

Dear 丶/ 2022年05月15日 08:27/ 0 赞/ 335 阅读

相关 DOM和JQuery对象

1. DOM对象和jQuery对象 DOM对象：直接使用JavaScript获取的节点对象 var objDOM=document.getElementById("

系统管理员/ 2022年05月15日 07:16/ 0 赞/ 293 阅读

相关 jQuery中jQuery对象和DOM对象的转换

1.注意事项：需要引入jQuery文件，我引入的是jQuery1.6.4版本 2.jQuery对象转换成DOM对象： <!DOCTYPE html PUBLIC "-//

╰半橙微兮°/ 2022年03月29日 21:12/ 0 赞/ 282 阅读

相关 jQuery对象和DOM对象的转换

jQuery对象：通过jQuery包装DOM对象后产生的对象。注意：jQuery对象无法使用DOM对象的任何方法，同理，DOM对象也无法使用jQuery对象的任何方法。

系统管理员/ 2022年03月22日 12:00/ 0 赞/ 324 阅读

相关 jquery对象和DOM对象的区别

第一次学习jQuery，经常会搞不清楚哪些是jQuery对象、哪些是DOM对象，所以需要重点了解它们以及它们之间的关系。 1. DOM对象 DOM（Document Obj

傷城~/ 2021年11月13日 17:40/ 0 赞/ 382 阅读

相关 JQuery对象和DOM对象的区别

一.分析JQuery对象和DOM对象的区别首先DOM对象是我们用传统的方法（[JavaScript][]）获得的对象，jQuery对象就是用jQuery的类库选

心已赠人/ 2021年09月14日 01:46/ 0 赞/ 464 阅读