刚开始学习JQuery，经常分不清楚哪些是JQuery对象，哪些是DOM对象，了解它们之间的关系是很有必要的。

1、DOM对象和JQuery对象的区别

1)  DOM对象

　　DOM是Document Object Model,即文档对象模型的缩写。DOM是以层次结构组织的节点或信息片段的集合，每一份

DOM都可以表示成一个树。

如：

<html>

    <head>

       <title>标题内容</title>

   </head>

    <body>

         <p>测试文本</p>

   </body>

</html>

上面<html>是DOM树的根元素，其他是根下面的元素(<head>、<body>)等

2) JQuery对象

　　JQuery对象是通过JQuery包装DOM对象后产生的对象，JQuery对象是独有的，可以使用JQuery的方法

如：

$('#test').html();

等价于DOM中的：

document.getElementById("test").innerHTML;

虽然JQuery对象是包装DOM对象后产生的，但是JQuery无法使用DOM对象的任何方法，同理，DOM对象也不能使用JQuery对象方法。

注：

$('#test')  这样获取的是JQuery对象，document.getElementById("test") 获取的是DOM对象，它们不是等价的。

2、DOM对象和JQuery对象的相互转换

1）JQuery对象转化为DOM对象

var $mr = $('#mr');   //JQuery对象

var mr1 = $mr[0];   //DOM对象

var mr2 = $mr.get(0);  //DOM对象

alert(mr1.value);   //弹出DOM对象元素的值

2）DOM对象转化为JQuery对象

var mt = document.getElementById("mt");   //DOM对象

var $mt = $(mr);   //JQuery对象

alert($mt.val());   //弹出JQuery对象的值

如：

<script>

   $(document).ready(function(){

        var domObj = document.getElementById("mr");

         alert("使用DOM方法获取节点mr的内容：" + domobj.innerHTML);

         var $jqueryObj = $(domObj);   //转化为Jquery对象

         alert("使用JQuery方法获取节点mr的内容：" + $jqueryObj.html());

   })

</script>

JQuery对象和DOM对象的区别与转换的更多相关文章

  1. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  2. JQuery对象与DOM对象的区别与转换

      1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...

  3. jQuery学习-----（二）JQuery对象与DOM对象的区别与转换

    1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...

  4. 关于jquery对象和DOM对象的区别

    这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所 ...

  5. jquery对象和DOM对象的区别和转换

    jquery对象和DOM对象的区别和转换 在使用jquery时,我们直接通过jq的选择器获取元素,然后对元素进行操作,用jq选择器获取到的对象是一个jq对象,jq对象能够使用jq提供的方法,但是不能用 ...

  6. 2、jQuery的基本概念-必看-版本-入口函数- jq对象和dom对象区别

    1.4. jQuery的版本 官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x 大版本分类: 1.x版本:能够兼容IE678浏览 ...

  7. JS对象与Dom对象与jQuery对象之间的区别

    前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...

  8. 【二】jquery之基础概念与jquery对象与dom对象的区别及混合使用

    一:jquery基本概念 1.jquery是一个javascript框架,它是一个轻量级的js库 2.当下流行的js库有: jquery MooTools Prototype 3.$(ducoment ...

  9. 了解jQuery并掌握jQuery对象和DOM对象的区别

    jQuery的优势: 开源--开放源代码 轻量级 强大的选择器 出色的DOM操作(对DOM元素的一个增删改查) 完善的Ajax,出色的浏览器兼容性,丰富的插件支持,完善的文档(说明书) 链式操作方式, ...

  10. jQuery对象与DOM对象的区别

    如何判断一个js对象是否一个DOM对象 我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否D ...

随机推荐

  1. 学习笔记37—WIN7系统本地连接没有有效的IP地址 电脑本地连接无有效ip配置怎么办

    WIN7系统本地连接没有有效的IP地址 电脑本地连接无有效ip配置怎么办 家中有两台笔记本都有无线网卡,现在想让两台笔记本都能够上网,而又不想购买路由器,交换机等设备,这个时候怎么办呢? 其实只要进行 ...

  2. 学习笔记17—circos安装集（window环境）

    Windows7环境下Circos使用教程 一.下载安装软件包 1.strawberry perl 因为Circos软件是依赖perl语言编译环境的,但是windows环境下默认是没有perl的,所以 ...

  3. Java 8里面lambda的最佳实践

    Java 8已经推出一段时间了,越来越多开发人员选择升级JDK,这条热门动弹里面看出,JDK7最多,其次是6和8,这是好事! 在8 里面Lambda是最火的主题,不仅仅是因为语法的改变,更重要的是带来 ...

  4. MarkerOpter marker操作类

    构造函数:MarkerOpter=function(p_params): p_params={} 参数描述: p_params.layer; // markerlayer p_params.imgUr ...

  5. 02-python-垃圾回收机制

    转载自 https://www.cnblogs.com/Xjng/p/5128269.html 加以整理,方便记忆 1垃圾回收机制 Python中的垃圾回收是以引用计数为主,分代收集为辅.引用计数的缺 ...

  6. Python全栈开发-Day1-Python基础1

    目录 Python介绍 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语句 表达式f ...

  7. ip网关配置

    流量查看watch more /proc/net/devip子网查询https://www.sojson.com/convert/subnetmask.htmlhttp://ip.gchao.cn/ ...

  8. 20165303学习基础和C语言基础调查

    20165303学习基础和C语言基础调查 技能学习心得 我认为我的乒乓球打的还不错,不能说非常好,但是基本的一些技巧都还是会的,小时候爸爸就非常爱看乒乓球比赛,有时候也带着我一起看,最开始看的时候我发 ...

  9. English trip V1 - B 16. Giving Reasons 提供个人信息 Teacher:Lamb Key: Why/Because

    In this lesson you will learn how to give reasons for something you've done. 课上内容(Lesson) Why do peo ...

  10. 【消息队列】kafka是如何保证消息不被重复消费的

    一.kafka自带的消费机制 kafka有个offset的概念,当每个消息被写进去后,都有一个offset,代表他的序号,然后consumer消费该数据之后,隔一段时间,会把自己消费过的消息的offs ...