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 相关文章推荐
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
详解jquery选择器的原理
Aug 01 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现增删改查
Dec 22 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 获取mysql数据库信息代码
2009/03/12 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
php通用防注入程序 推荐
2011/02/26 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
详解appium+python 启动一个app步骤
2017/12/20 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
学校领导班子群众路线整改措施
2014/09/16 职场文书
护士自我推荐信范文
2015/03/24 职场文书
Python基础详解之描述符
2021/04/28 Python
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技