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+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jquery实现手风琴案例
May 04 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创建多级目录代码
2008/06/05 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
JavaScript中的eval()函数详解
2013/08/22 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
微信小程序实现分页加载效果
2020/11/19 Javascript
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python 学习教程之networkx
2019/04/15 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
pandas apply多线程实现代码
2020/08/17 Python
餐厅考勤管理制度
2014/01/28 职场文书
境外导游求职信
2014/02/27 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
个人专业技术总结
2015/03/05 职场文书
python多线程方法详解
2022/01/18 Python