jQuery traversant les étapes de mise en œuvre des nœuds et des attributs XML

Cette fois, je vais vous présenter les étapes pour implémenter jQuery pour parcourir les nœuds et les attributs XML. Quelles sont les précautions pour jQuery traversant les nœuds et les attributs XML. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Après quelques recherches, il semble que jquery n'ait pas d'attributs. Nous devons toujours nous fier au JS d'origine

Ce qui suit est le code JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<p id="c"></p>
<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>

<.> Ci-joint un fichier XML

Veuillez nommer config.xml et placez-le dans le même répertoire que le js ci-dessus, et mettez-les tous les deux dans le site

<?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>

I croyez que vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le plug-in de défilement plein écran dans ES6

vue +vue-router+autorisations d'opération vuex

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!