学习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

（四）DOM对象和jQuery对象的更多相关文章

  1. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  2. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  3. 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  4. DOM对象与jQuery对象的相互转换

    DOM  对象可以使用 js       中的方法,  不能使用jQuery中的方法:jQuery对象只能使用jQuery中的方法, 不能使用js中的方法:jQuery对象是通过jQuery包装DOM ...

  5. 关于DOM对象与JQuery对象的那些事

    这个问题源自上一次的工作室讨论班,主题是"jQuery选择器的使用",在讨论班的结尾,我留了一个思考题:  jQuery获取到的对象和直接调用原生Javascript方法获得的对象 ...

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

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

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

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

  8. DOM对象 与 jQuery对象 之间的相互装换

    示例代码: //jQuery对象转DOM对象 //因为jQuery对象是一个数组对象,所以转换为DOM对象时要用索引的形式 var $div1 = $("#div1"); //jQ ...

  9. DOM对象与jquery对象的区别

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

随机推荐

  1. 现代互联网的TCP拥塞控制(CC)算法评谈

    动机 写这篇文章本质上的动机是因为前天发了一个朋友圈,见最后的写在最后,但实际上,我早就想总结总结TCP拥塞控制算法点点滴滴了,上周总结了一张图,这周接着那些,写点文字. 前些天,Linux中国微信公 ...

  2. Python 操作 Mysql 模块

    一.Python 操作 Mysql 模块的安装 linux: yum install MySQL-python window: http://files.cnblogs.com/files/wupei ...

  3. HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

  4. PHP一维数组和二维数字排序整理

    <?php /** 一维数组排序 sort() - 以升序对数组排序 rsort() - 以降序对数组排序 asort() - 根据值,以升序对关联数组进行排序 ksort() - 根据键,以升 ...

  5. Java语法糖（一）

    概述 语法糖(Syntactic Sugar):主要作用是提高编码效率,减少编码出错的机会. 解语法糖发生在Java源码被编译成Class字节码的过程中,还原回简单的基础语法结构. 语法糖之一:泛型( ...

  6. Hibernate的merge与update方法的区别

    今天做了个测试,写了个测试用例来看看merge与update时控制台打印出来的日志有什么不一样.实体bean很简单,就id和name两个字段,接下来分别给出以下几种测试情形的控制台日志内容: 1. 数 ...

  7. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---14

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  8. 2018年东北农业大学春季校赛 E 阶乘后的0【数论】

    链接:https://www.nowcoder.com/acm/contest/93/E来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  9. Codeforces 429D Tricky Function（平面最近点对）

    题目链接  Tricky Function $f(i, j) = (i - j)^{2} + (s[i] - s[j])^{2}$ 把$(i, s[i])$塞到平面直角坐标系里,于是转化成了平面最近点 ...

  10. Codeforces 746G New Roads (构造)

                                                                            G. New Roads                 ...