jQuery实现遍历XML节点和属性的方法示例


Posted in jQuery onApril 29, 2018

本文实例讲述了jQuery实现遍历XML节点和属性的方法。分享给大家供大家参考,具体如下:

用jquery遍历xml网上已经有很多, 但是看了好多文章, 对于不指定属性名称的遍历方法却没有

研究了一下, 好像jquery没有attributes. 还是要借助于原生态的JS

以下是JS代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<div id="c"></div>
<script>
//用于缩进, 根据节点级别
var M_DOT = 1;
//递归函数, 用于遍历XML, 同时打印出来
function fn(obj){
  //定义一个变量, 用于缩进
  var dotString = "";
  //根据缩进量, 得到缩进的长度
  for(j = 1; j <= M_DOT; j++){
    dotString += "    ";
  }
  //jquery不支持attributes属性集, 转为原生js, 并赋给myObj变量
  var myObj = obj[0].attributes;
  //打印缩进
  $("#c").append(dotString)
  //打印属性集nodeName, nodeValue为原生JS, 分别表示为属性的名称, 和属性值
  $(myObj).each(function(i){
    $("#c").append( ($(this)[0].nodeName) + "=<u>" + ($(this)[0].nodeValue) + "</u> " );
  })
  //打印节点的文本
  //$("#c").append( "<b>" + obj.text() + "</b><br/>");
  //打印换行
  $("#c").append( "<br/>");
  //判断DOM有无子DOM
  if( obj.length > 0 ){
    //如果有, 遍历之
    obj.children().each(function(i){
      //缩进量加一
      M_DOT++;
      //递归遍历子DOM
      fn($(this));
      //缩进量加一
      M_DOT--;
    })
  }else{
    //如果没有子DOM, 返回false
    return false;
  }
}
//程序入口
$(document).ready(function() {
  //ajax获取xml数据, 详细用法见jquery手册
  $.get('config.xml', function(d){
    //len = $(d).find("*").length;
    //找到xml顶级结点. ('*:first'):就是查找第一个DOM. 详细说明见jquery手册
    //find, children(), each, 以及后面用到的 append 等请查阅jquery手册
    $(d).find('*:first').children().each(function(i){
      //找到顶级结点的子结点, 并把子结点对象传给fn函数
      fn($(this));
    });
  });
});
</script>

附一个XML文件

请取名config.xml放在和以上js同目录下, 并都放在站点中

<?xml version="1.0" encoding="utf-8" ?>
<roster>
  <student ID="s101">
    <name>李华</name>
    <sex>男</sex>
    <birthday>1978.9.12</birthday>
    <score>92</score>
    <skill>Java</skill>
    <skill>Oracle</skill>
    <skill>C Sharp</skill>
    <skill>SQL Server</skill>
  </student>
  <student ID="s107">
    <name>李寻欢</name>
    <sex>男</sex>
    <birthday>1981.4.19</birthday>
    <score>58</score>
    <skill>UML</skill>
    <skill>C Sharp</skill>
    <skill>XML</skill>
    <skill>SQL Server</skill>
  </student>
</roster>
jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
详解jquery和vue对比
Apr 16 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
jQuery length 和 size()区别总结
Apr 26 #jQuery
You might like
php下实现农历日历的代码
2007/03/07 PHP
PHP与以太坊交互详解
2018/08/24 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js转义字符介绍
2013/11/05 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
python机器学习之贝叶斯分类
2018/03/26 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Python流程控制 if else实现解析
2019/09/02 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
什么是python的id函数
2020/06/11 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
怎么写好自荐信
2013/10/30 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
探亲邀请信范文
2014/01/30 职场文书
2014学年自我鉴定
2014/02/23 职场文书
环境科学专业求职信
2014/08/04 职场文书
中职招生先进个人材料
2014/08/31 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
详解PHP Swoole与TCP三次握手
2021/05/27 PHP