`
wuzhihui001
  • 浏览: 19588 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

JS对象、DOM对象、Jqeury对象、Json对象 对比分析

阅读更多
一直以来都搞不清这几个对象到底什么关系,通过资料查阅,自己的理解如下:

JS对象:javascript对象,在js代码里面定义的对象(对象有属性和方法)。

DOM对象:其实就是定义好了的JS对象,只不过针对规范的DOM标准定义好了对象的相关属性和方法。如Document对象有body、cookie等属性和close()、writer()等方法。

Jquery对象:用Jquery语法包装原始Dom对象后生成的新对象。(包装后的Jquery对象就可以使用Jquery方法了)。

Json对象:理论上只是一种数据格式,它只是一种相应格式的字符串数据。它的出现主要是用于在不同的语言之间进行数据交互。严格说,这种对象只有属性和相应的值,并没有方法。


   
Dom对象与Jquery对象的互转
Dom对象转Jquery对象:只需通过Jquery方法$( )进行包装就可以转换成Jquery对象。
Jquery对象转Dom对象: 只要调用JQuery中提供的 [index] 与 get(index)方法即可将Jqeury对象转成Dom对象。

事例:

Jscript代码
<head>  
    <title>DOM对象与jQuery对象的类型转换</title>  
    <script type="text/javascript"   
            src="Jscript/jquery-1.4.2-vsdoc.js">  
    </script>  
    <script type="text/javascript"   
            src="Jscript/jquery-1.4.2.js">  
    </script>  
    <style type="text/css">  
           body{font-size:13px}  
           div{padding:5px}  
    </style>  
    <script type="text/javascript">  
        $(function() {  
            //***** DOM对象转成jQuery对象 *****//  
            //DOM对象  
            var objDom0 = document.getElementById("div0");  
            //转成jQuery对象  
            var $obj0 = $(objDom0);  
            //调用jQuery中的方法设置其中的内容  
            $obj0.html("DOM对象转成jQuery对象后设置的内容");  
  
            //***** jQuery对象转成DOM对象 *****//  
            //jQuery对象  
            var $obj1 = $("#div1");  
            //转成DOM对象  
            var objDom1 = $obj1.get(0);  
            //调用JavaScript中的对象方法设置内容  
            objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容";  
        })  
    </script>  
</head>  
<body>  
    <div id="div0"></div>  
    <div id="div1"></div>  
</body>  
</html> 



Js对象与Json对象转换
Json对象转Js对象:很容易转,自己可写方法实现。Jqeury有Jquery.parseJson(json)方法等
Js对象转Json对象:有很多第三方插件实现了,也可以自己写方法实现。下面为一个实例:
Jscript代码
function toJson(obj){        
     switch(obj.constructor){        
         case Object:        
             var str = "{";        
             for(var o in obj){        
                 str += o + ":" + Serialize(obj[o]) +",";        
             }       www.2cto.com  
             if(str.substr(str.length-1) == ",")        
                str = str.substr(0,str.length -1);        
              return str + "}";        
              break;        
          case Array:                    
              var str = "[";        
              for(var o in obj){        
                  str += Serialize(obj[o]) +",";        
              }        
              if(str.substr(str.length-1) == ",")        
                  str = str.substr(0,str.length -1);        
              return str + "]";        
              break;        
          case Boolean:        
              return "\"" + obj.toString() + "\"";        
              break;        
          case Date:        
              return "\"" + obj.toString() + "\"";        
              break;        
          case Function:        
              break;      //如果是方法,则过滤掉,什么也不做  
         case Number:        
              return "\"" + obj.toString() + "\"";        
              break;         
          case String:       
             return "\"" + obj.toString() + "\"";        
              break;            
      }        
  }  



总结:Jquery对象、Dom对象、Js对象,其实都是javascript对象,只不过有各自己的不同的属性和方法。而Json对象,严格说只是一种相应格式的数据而已。只不过同常在javascript中把json数据(字符串)转换为js对象来使用
分享到:
评论

相关推荐

    jquery.json-viewer, 用于显示JSON数据的jQuery插件.zip

    jquery.json-viewer, 用于显示JSON数据的jQuery插件 jQuery浏览器JSON浏览器是一个jQuery插件,它可以通过将JSON对象转化为HTML来轻松显示JSON对象。功能:语法高亮显示在单击时折叠和展开子节点可以点击链接易于...

    jquery-load-json:jQuery插件,使开发人员能够从服务器加载JSON数据并将JSON对象加载到DOM中

    jQuery loadJSON插件这是一个jQuery插件,使开发人员能够从服务器加载JSON数据并将JSON对象加载到DOM中。 不需要模板语言-该插件使用DOM元素属性将HTML页面中的DOM元素与JSON对象进行匹配。社区是否想为jQuery load...

    jquery.json-editor:基于jquery.json-viewer的json编辑器

    jquery.json-editor A json editor based on . Check out the ! 特性: 语法高亮 支持数据块展开与收起 简单 可编辑 使用 [removed][removed] [removed][removed] /** * 初始化一个 JsonEditor * * @param {DOM|...

    一个基于json 类 SQL 语言 jsql 过滤 JavaScript 对象的库

    jsql 是一种 JavaScript 查询语言,以及一个简单的 JavaScript 对象 (POJSO) 参考实现。 这不是为了搜索 dom、jQuery 或某些特定...jsql 旨在为查询任何内容提供原生 JSON 查询格式,尽管最初仅限于 JavaScript 对象。

    Beginning JavaScript with DOM Scripting and Ajax: Second Editon

    As well as focusing on client-side JavaScript, you will also learn how to work with the Browser Object Model, the Document Object Model (DOM), how to use XML and JSON as well as communicate with ...

    Beginning JavaScript with DOM Scripting and Ajax (pdf + ePub)

    As well as focusing on client-side JavaScript, you will also learn how to work with the Browser Object Model, the Document Object Model (DOM), how to use XML and JSON as well as communicate with ...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    JQuery权威指南源代码

    第1章 第一个简单的jQuery程序 jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 ...DOM对象与jQuery对象的类型转换 第11章 应用案例-聊天室系统 应用案例_图片切割

    jQuery权威指南366页完整版pdf和源码打包

    10.5.1 jquery在其他库前导入 10.5.2 jquery在其他库后导入 10.6 使用子查询优化选择器性能 10.7 减少对dom元素直接操作 10.8 正确区分dom对象与jquery对象 10.8.1 dom对象与jquery对象的定义 10.8.2 ...

    jquery插件使用方法大全

    使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分): 代码 var a = $("#cid"); var b = $("&lt;p&gt;hello&lt;/p&gt;"); var c = document.createElement("table"); var tb = $(c); 编辑本段代替body...

    jQuery基于ajax操作json数据简单示例

    本文实例讲述了jQuery基于ajax操作json数据的方法。分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据...

    w3school最新版11.12.6.chm

    JavaScript 对象实例 HTML DOM 实例 XML DOM 实例 DHTML 实例 AJAX 实例 VBScript 实例 ASP 实例 ADO 实例 SVG 实例 WAP 实例 测验/考试 HTML 测验 XHTML 测验 CSS 测验 XML 测验 JavaScript 测验 ...

    jquery-1.3.2

    《Learning jQuery:Better Interaction Design and Web Development with Simple JavaScript Techniques》第一本由jQuery的开发人员写的关于如何学习jQuery的书已经于七月面世,同时还有三本相关的书在问世当中。

    searchjs:一个用于基于类似于json SQL的语言jsql过滤JavaScript对象的库

    jsql旨在提供一种本机JSON查询格式来查询任何内容,尽管最初只限于JavaScript对象。 参考实施 参考实现searchjs使用jsql查询JS对象或对象数组,并返回与查询匹配的结果。 语法定义 jsql语法定义如下。 jsql始终是...

    json字符串格式化高亮工具

    基于jQuery的json格式化、高亮库 使用方式 引入jQuery [removed][removed] 注意:jQuery版本要求&gt;=1.7.2 引入jsonFormater.js和jsonFormater.css [removed][removed] &lt;link href="jsonFormater.css" type=...

    jquery1.9.1中文版

    // JSON RegExp(JavaScript Object Notation:JavaScript对象标记法正则表达式) rvalidchars = /^[\],:{}\s]*$/, rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g, rvalidescape = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    10-25 1 jquery框架 jquery对象与dom对象区别及混合使用 10-25 2 jquery id选择器 层次选择器 10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤...

    jQuery详细教程

    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); &lt;p&gt;If you click on me, I ...

    elopts.js:从dom元素中收集参数并将其与其他对象合并

    Elopts.js是一个简单的javascript模块,可帮助您收集有关dom元素的信息,例如数据属性,src属性的query-params或cdata-section中的json。 在实现js插件或第三方js应用程序时,这很有用。 elopts.js实现的某些任务也...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

Global site tag (gtag.js) - Google Analytics