学习jQuery,需要搞清楚DOM对象和jQuery对象的关系与区别,因为两者的方法并不共用,如果搞不清楚对象类型就会导致调用错误的方法。

DOM(Document Object Model)称为文档对象模型,每一份DOM对象都可以表示成一棵树。

<body><h2>这里是标题</h2><p>dom结构的解说</p><ul><li>aaaaa</li><li>sssss</li><li>ddddd</li><li>fffff</li></ul><div id="div1">hello world!</div></body>

上面代码中的<h2>、<p>、<ul>、<li>等都是DOM元素节点。可以通过javascript中的getElementById或getElementsByTagName方法来获取DOM对象的元素节点,像这样得到的DOM元素就是DOM对象,DOM对象可使用javascript中的方法。

jQuery对象就是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery里独有的对象,它可以调用jQuery方法,比如:

document.getElementById("div1").innerHTML;

和下面方法功能是相同的

$("#div1").html();

但是两种对象只能调用各自方法,一旦混用就是错误的。

但是两种对象可以相互转换,DOM对象转换成jQuery对象时只需要用$()将对象包装起来即可。

jQuery对象转换成DOM对象是有两种方式:

  第一种是将jQuery对象看成一个数组,然后取数组第一个元素便是DOM对象;

  第二种是jQuery提供的get(index)方法可以取出DOM对象。例如:

var div=doucment.getElementById("div1");
var div01=$(div);  //DOM对象转换成jQuery对象
var div02=div01[0];   //jQuery对象转换成DOM对象
var div03=div01.get[0];  //jQuery对象转换成DOM对象

除了div01之外都是DOM对象。在写页面控制时只有灵活运用DOM对象和jQuery对象才能够写出灵活美观的页面。

更多关于DOM对象的讲解:

http://www.cnblogs.com/yerenyuan/p/5397919.html

http://www.cnblogs.com/polk6/p/4957563.html

转载于:https://www.cnblogs.com/xiangru0921/p/6520452.html

(四)DOM对象和jQuery对象相关推荐

  1. jquery jQuery的入口函数 $函数 dom对象和jquery对象

    文章目录 jquery jQuery的入口函数 $函数 dom对象和jquery对象 jQuery的入口函数 视频 代码 $函数 视频 代码 dom对象和jquery对象 视频 代码 jquery j ...

  2. DOM对象与jquery对象有什么不同

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

  3. js中的DOM对象和jQuery对象的比较

    1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...

  4. Js - Dom原生对象和jQuery对象的联系、区别、相互转换

    Dom原生对象和jQuery对象的联系.区别.相互转换: 联系: 1.jQuery对象:通过jQuery包装DOM对象后产生的对象: 2.两者之间可以相互转换: 区别: 1.jquery选择器得到的j ...

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

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

  6. Dom对象、JavaScript对象、jQuery对象区别

    一.Dom对象.JavaScript对象.jQuery对象 1.1 Dom对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型 ...

  7. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery Hello World程序 <script type="text/javascript" src="xxx//jquery-x.y.z.js" ...

  8. Dom对象与jQuery对象的转换

    Dom对象与jQuery对象的转换 (1) Dom转jQuery包装集 如果要使用jQuery提供的函数,  就要首先构造jQuery包装集.  我们可以使用本文即将介绍的jQuery选择器直接构造j ...

  9. DOM对象和JQuery对象别还傻傻分不清

    DOM对象和JQuery对象别还傻傻分不清 经常分辨不清哪些是jQuery对象,哪些是 DOM对象? DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQue ...

最新文章

  1. 碎片化学习不是学习碎片,看这篇了解碎片化学习的真相
  2. Xamarin中国技术社区及BXUG官网上线啦
  3. gcc g++ 支持c++11编译的标准和区别
  4. pandas series 判断是否包含某个值
  5. mysql 释放行锁_《深入精通Mysql(三)》深入底层Mysql各种锁机制(面试必问)...
  6. 反向微分运放电路波形_做到这三步,轻松实现运放电路稳定性
  7. 一个简单的小程序demo
  8. office插件开发_Excel插件——方方格子
  9. 实验七-卷积编码的MATLAB实现
  10. 【土豆】——做人,要像土豆一样
  11. Editext编辑属性
  12. 微信公众平台接口调试工具json格式不对怎么搞_一步步教你打造微信公众号文章爬虫(3)-批量下载...
  13. Balsamiq Wireframes 免费安装
  14. 沪江日语小D落户博客园~
  15. thingsboard | thingsboard edge 删除设备 云端同步删除 thingsboard edge删除设备后 云端不删除设备
  16. 【历史上的今天】6 月 14 日:理论计算机科学的奠基人出生;VisiCalc 电子表格的发明者出生;雅虎收购 Overture
  17. (Linux)私人云盘seafile搭建详解
  18. 【python绘制地图】使用folium制作地图,可解决多数问题
  19. 灰点相机SDK研究(零)-Python安装灰点相机的SDK-spinnaker_python
  20. .NET忠实粉丝们,请进

热门文章

  1. AI:恐怖谷理论的陷阱
  2. Bootstrap 3之美02-Grid简介和应用
  3. uni-app官方教程学习手记
  4. 一文剖析区块链现状:丛林法则下的胜者
  5. nginx日志中添加请求的response日志
  6. BZOJ 2720 [Violet 5]列队春游 ——期望DP
  7. 【Spark Summit EU 2016】摆脱传统ETL,让我们走向Spark吧!
  8. webstrom 中 plugins error 设置里 Languages Frameworks里面没有JavaScript?
  9. shell脚本初体验
  10. 完全卸载 RAC_clusterware的方法