jQuery xml字符串的解析、读取及查找方法


Posted in Javascript onMarch 01, 2016

本文实例讲述了jQuery xml字符串的解析、读取及查找方法。分享给大家供大家参考,具体如下:

xml字符串的解析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
    var xml = '<markers>';
    xml += '<marker carId="1" carName="SHANGHAI" gpsTime="2011-08-26 21:21:11.0" lat="31.230393" lng="121.473704" direction="222" speed="22" />';
    xml += '<marker carId="7" carName="XIAMEN" gpsTime="2011-08-26 21:21:11.0" lat="24.479836" lng="118.089421" direction="222" speed="22" />';
    xml += '</markers>';
    var xmlDoc = $.parseXML(xml);
    var result="";
    $(xmlDoc).find("markers marker").each(function () {
      result += "carId = " + $(this).attr("carId")
        + " ;carName =" + $(this).attr("carName")
        + " ;gpsTime =" + $(this).attr("gpsTime") + "\n";
    });
    alert(result);
  });
</script>
</head>
<body>
</body>
</html>

请求

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function search() {
  var searchStrLow = $("#txtTitle").val().toLowerCase();
  $.post("1.xml", function(data) {
    var html = "";
    $(data).find('book').each(function() {
      var titleLow = $(this).find("title").text().toLowerCase();
      if (titleLow.indexOf(searchStrLow)!=-1) {
        html += "<tr><td>" + $(this).find("title").text() + "</td>";
        html += "<td>" + $(this).find("author").text() + "</td>";
        html += "<td>" + $(this).find("year").text() + "</td></tr>";
        $("#tbody1").html(html);
      }
    });
  });
}
</script>
</head>
<body>
  <span>输入标题:</span><input id="txtTitle" type="text" />
  <input id="Button1" type="button" value="搜索" onclick="search()" />
  <table style="width: 100%;">
    <thead><tr><td>Title</td><td>Author</td><td>Year</td></tr></thead>
    <tbody id="tbody1">
    </tbody>
  </table>
</body>
</html>

xml:

<?xml version="1.0" encoding="utf-8" ?>
<bookstore>
<book id="No1">
  
<title>An Introduction to XML</title>
  
<author>Chunbin</author>
  
<year>2010</year>
  
<price>98.0</price>
  </book>

<book id="No2">
  
<title>The Performance of DataBase</title>
  
<author>John</author>
  
<year>1996</year>
  
<price>56.0</price>
  </book>
</bookstore>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
微信小程序开发探究
Dec 27 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 #Javascript
JS创建对象几种不同方法详解
Mar 01 #Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 #Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 #Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 #Javascript
ClearTimeout消除闪动实例代码
Feb 29 #Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 #Javascript
You might like
php smarty模版引擎中的缓存应用
2009/12/02 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
学习python分支结构
2019/05/17 Python
python字典一键多值实例代码分享
2019/06/14 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python新手学习raise用法
2020/06/03 Python
pandas DataFrame运算的实现
2020/06/14 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
教师简历自我评价
2014/02/03 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
法定授权委托证明书
2015/06/18 职场文书
读书笔记怎么写
2015/07/01 职场文书