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实现二级联动效果
Mar 30 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
jquery自定义组件实例详解
Dec 31 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
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中使用ElementTree解析XML示例
2015/06/02 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python设置环境变量的原因和方法
2019/06/24 Python
python实现大文本文件分割
2019/07/22 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
美国五金商店:Ace Hardware
2018/03/27 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
大学生专业个人学习的自我评价
2013/10/26 职场文书
业务部经理岗位职责
2014/01/04 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
人民教师求职自荐信
2014/03/12 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
新党员入党决心书
2015/09/22 职场文书
python四种出行路线规划的实现
2021/06/23 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers