1、HTML

有的时候会将一段HTML片段保存在HTML文件中，在另外的主页面直接读取该HTML文件，然后解析里面的HTML代码片段融入到主页面中。

fragment.html文件，其内容：

复制代码 代码如下: <div>hello Jquery</div>

在主页面 Test.html中解析代码

复制代码 代码如下: $("#a1").click(function(){     $("#div2").load('fragment.html');     return false;  });[code]

2、JSON JSON文件是test.json，其内容： [code] [{"name":"jim","age":"20"},{"name":"lily","age":"18","hobby":["swim","movie"]}]

在主页面 Test.html中解析代码

复制代码 代码如下: $("#a2").click(function(){          $.getJSON('test.json',function(data){              var html = '<table>';              $.each(data,function(entryIndex,entry){                  html += '<tr><td>'+entry.name+'</td><td>'+entry.age+'</td>';                  if(entry.hobby){                      html += '<td>';                      $.each(entry.hobby, function(lineindex,line) {                          html += line+",";                      });                      html += '</td>';                  }

html += '</tr>';              });              html += '</table>';              $("#div2").html(html);              return false;         });      });

3、XML XML文件是test.xml，其内容是： 复制代码 代码如下: <?xml version="1.0" encoding="utf-8" ?>  <root>      <book id="1">          <name>深入浅出extjs</name>          <author>张三</author>          <price>88</price>      </book>      <book id="2">          <name>锋利的jQuery</name>          <author>李四</author>          <price>99</price>      </book>      <book id="3">          <name>深入浅出flex</name>          <author>王五</author>          <price>108</price>      </book>      <book id="4">          <name>java编程思想</name>          <author>钱七</author>          <price>128</price>      </book>  </root>

在主页面 Test.html中解析代码 复制代码 代码如下: $("#a3").click(function(){          $.get('test.xml',function(data){              var s="";              $(data).find('book').each(function(i){                  var id=$(this).attr('id');                  var name=$(this).children('name').text();                  var author=$(this).children('author').text();                  var price=$(this).children('price').text();                  s+=id+"    "+name+"    "+author+"    "+price+"<br>";              });              $('#div2').html(s);          });      });

对JQuery解析不同文档做了一个Demo，Test.html的原码是 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title></title>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      <script type="text/javascript" src="jquery.js"></script>      <script type="text/javascript">

$(function(){      $("#a1").click(function(){         $("#div2").load('fragment.html');         return false;      });

$("#a2").click(function(){          $.getJSON('test.json',function(data){              var html = '<table>';              $.each(data,function(entryIndex,entry){                  html += '<tr><td>'+entry.name+'</td><td>'+entry.age+'</td>';                  if(entry.hobby){                      html += '<td>';                      $.each(entry.hobby, function(lineindex,line) {                          html += line+",";                      });                      html += '</td>';                  }

html += '</tr>';              });              html += '</table>';              $("#div2").html(html);              return false;         });      });$("#a3").click(function(){          $.get('test.xml',function(data){              var s="";              $(data).find('book').each(function(i){                  var id=$(this).attr('id');                  var name=$(this).children('name').text();                  var author=$(this).children('author').text();                  var price=$(this).children('price').text();                  s+=id+"    "+name+"    "+author+"    "+price+"<br>";              });              $('#div2').html(s);          });      });  });

</script>  </head>  <body>      <form id="form1" runat="server">      <ul id="div1">          <li><a id="a1" href="#">show html fragment</a></li>          <li><a id="a2" href="#">show json</a></li>          <li><a id="a3" href="#">show xml</a></li>      </ul>          <p>Show Content:</p>      <div id ="div2"></div>      </form>      <div>

</div>  </body>  </html>

利用FireFox浏览器打开该Test.html文件，效果如下

点第一个超链接会在Show Content区域显示新插入的html片段

点第二个超链接，会显示json数据：

点第三个超链接，会显示xml数据：

详细出处参考：http://www.jb51.net/article/48549.htm

JQuery解析HTML、JSON和XML实例详解的更多相关文章

  1. C# XML与Json之间相互转换实例详解

    对于这转换其实很简单,其中最重要的就是先要引用类库.可以到官网进行下载引用http://json.codeplex.com. XML转换为Json字符串 string xml = @"< ...

  2. JavaScript解析机制与闭包原理实例详解

    js代码解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字; 2.用var定义的变量 ...

  3. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

  4. Java eclipse下 Ant build.xml实例详解

    在有eclipse集成环境下ant其实不是很重要,但有些项目需要用到,另外通过eclipse来学习和理解ant是个很好的途径,所以写他demo总结下要点,希望能够帮到大家. 一.本人测试环境eclip ...

  5. 转：Java eclipse下 Ant build.xml实例详解

    在有eclipse集成环境下ant其实不是很重要,但有些项目需要用到,另外通过eclipse来学习和理解ant是个很好的途径,所以写他demo总结下要点,希望能够帮到大家. 一.本人测试环境eclip ...

  6. Java eclipse下 Ant build.xml实例详解 附完整项目源码

    在有eclipse集成环境下ant其实不是很重要,但有些项目需要用到,另外通过eclipse来学习和理解ant是个很好的途径,所以写他demo总结下要点,希望能够帮到大家. 一.本人测试环境eclip ...

  7. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...

  8. Java中JSON字符串与java对象的互换实例详解

    这篇文章主要介绍了在java中,JSON字符串与java对象的相互转换实例详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JS ...

  9. Java中JSON字符串与java对象的互换实例详解（转）

    http://www.jb51.net/article/90914.htm 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级的数据格式比xml效率要 ...

随机推荐

  1. t

    http://www.cnblogs.com/courtier/p/4287177.html 360导航_新一代安全上网导航 http://www.cnblogs.com/zhenzi/p/42926 ...

  2. JavaScript之this指针深入详解

    javascript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式.函数有以下几种调用方式:作为对象方法调用.作为函数调用.作为构造函数调用.apply或 ...

  3. selenium.common.exceptions.TimeoutException: Message: Screenshot: available via screen

    在使用selenium+phantomjs的时候在Windows平台下能够正常工作,在Linux下却不能,并得到错误信息: selenium.common.exceptions.TimeoutExce ...

  4. php中传值与传引用的区别。什么时候传值什么时候传引用？

    值传递:   函数范围内对值的任何改变在函数外部都会被忽略; 引用传递: 函数范围内对值的任何改变在函数外部也能反映出这些修改: 优缺点:按值传递时,php必须复制值.特别是对于大型的字符串和对象来说 ...

  5. myeclipse svn

    打开myeclipse的help---install from site 点击add弹出对话框 在输入框中输入对应内容 http://subclipse.tigris.org/update_1.10. ...

  6. All About JAVA Maven的安装

    一转眼几个月过去了..真是忙碌的几个月,最近在弄CAS 身份认证系统,新版本的CAS需要使用Maven进行构建,所以还要研究下Maven相关的资料.第一步就是下载安装Maven.根据官方网站的文档很容 ...

  7. 彻底理解Cisco/Linux/Windows的IP路由

    -1.只要理解实质,名称并不重要! 很多使用Linux的网络高手在面对Cisco管理员的诸如管理距离,路由度量等词汇时,还没有PK就自觉败下阵来了.我觉得这实在太可惜了,大家本是一家,为何这么为难对方 ...

  8. Android编程动态创建视图View的方法

    在Android开 发中,在Activity中关联视图View是一般使用setContentView方法,该方法一种参数是使用XML资源直接创 建:setContentView (int layout ...

  9. json-lib-2.4-jdk15.jar maven

    最近自己将一个web项目装换到使用mevan自动管理. 遇到了一个json包导入的问题.最终解决如下: <!-- https://mvnrepository.com/artifact/net.s ...

  10. codevs 3052 多米诺 二分图匹配

    /*codevs 3052 二分图匹配 把矩阵分两批 黑和白 且黑白不相交 这就构成了二分图的两部分 然后求最大匹配*/ #include<cstdio> #include<cstr ...