开发者社区> 刘哇勇> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【译】用jQuery 处理XML-- jQuery与XML

简介: 用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML-- jQuery与XML 原文:Processing XML with jQuery 来自IBM Developer Works   jQuery与XML   快而强的遍历系统,华丽丽的选择器语法,这或许是jQuery 那么流行的原因。
+关注继续查看

 

用jQuery 处理XML--写在前面的话

用jQuery 处理XML-- DOM(文本对象模型)简介

用jQuery 处理XML--浏览器中的XML与JavaScript

用jQuery 处理XML-- jQuery与XML

原文:Processing XML with jQuery

来自IBM Developer Works

 

jQuery与XML

 

快而强的遍历系统,华丽丽的选择器语法,这或许是jQuery 那么流行的原因。当然它还有详尽的文档。它主要是用来处理HTML的,但在这里妳会看到如何应用到XML。

 

使用jQuery进行DOM元素的操作和遍历

 

首先确定妳在页面引用的jQuery库,才能使用它。然后简单地使用jQuery()或者它的简化形式$(), 传递一个选择器作为它的第一个参数。选择器通常是一个指定了一个或多个元素的字符串。清单20展示了一些基本的jQuery选择器的使用。

Listing 20. Basic jQuery selectors

 

<script type="text/javascript">

var allImages = $("img"); // all IMG elements

var allPhotos = $("img.photo"); // all IMG elements with class "photo"

var curPhoto = $("img#currentPhoto"); // IMG element with id "currentPhoto"

</script>

 

需要记住的一点是jQuery方法返回的始终是一个jQuery对象。这种对象支持链式操作(见清单21)。这一特性在其他JavaScript框架中也是通用的。

 

Listing 21. Basic jQuery operation with chained method calls

 

<script type="text/javascript">

$("img").css({"padding":"1px", "border": "1px solid #333"})

.wrap("<div class='img-wrap'/>");

</script>

 

上述代码选中页面中所有img元素并设置padding和border, 然后用一个带img-wrap class div 来包裹所有这些img.

 

清单22则展示了jQuery 是如何将前面章节的一个例子进行简化。

 

Listing 22. Creating and injecting a DOM node with jQuery

 

<script type="text/javascript">

alert($("h1:first").html()); // .text() also works and might be better suited here

 

$("#auth").text("Sign Out");

 

var $li = $("<li>List Item Text</li>");

// $ is used as var prefix to indicate jQuery object

$("ul#nav").append($li);

</script>

 

使用jQuery 处理XML

 

之前有提到过传递给jQuery $()的第一个参数是一个字符串形式的选择器。第二个不起眼的参数则允许你设置context,或者开始一个jQuery节点,抑或把当前选择的元素当作一个根节点来使用。默认jQuery会把Document作为当前的Context, 但更好的做法是把context指定得更详细更一些,具体到某个特定的元素身上。在进行XML处理时,需要把context设置为XML的根节点(见清单23)。

 

Listing 23. Retrieving values from an XML document with jQuery

 

<script type="text/javascript">

// get value of single node (with jQuery)

var description = $("description", xmlData).text();

// xmlData was defined in previous section

 

// get values of nodes from a set (with jQuery)

var relatedItems = $("related_item", xmlData);

var relatedItemVals = [];

$.each(relatedItems, function(i, curItem){

relatedItemVals.push(curItem.text());

});

</script>

 

上述代码使表示变得相当简洁。通过向jQuery传递节点名称和设置它的context为xmlData,可以很方便地获取想要的节点。取得元素的值,刚需要一翻周折了。

因为innerHTML 对于非HTML元素不管用,所以就不能使用jQuery的html()方法来获取节点的值。jQuery 虽然提供了一个跨浏览器的方法innerText 来获取元素的值,但当用来处理XML时在浏览器间仍有些差异。比如IE会把包含空值(空格,Tab点位符,换行)的节点给忽略掉,而处理这样的情况时,FireFox则会把这些节点当作正常节点。为了避免这点不一致性,可以创建一个函数来处理。这个函数里需要用到一些jQuery函数: contents()filter()  trim()

 

Listing 24. Cross-browser JavaScript functions for accurate text value retrieval of a node

 

<script type="text/javascript">

/**

* Retrieves non-empty text nodes which are children of passed XML node.

* Ignores child nodes and comments. Strings which contain only blank spaces

* or only newline characters are ignored as well.

* @param node {Object} XML DOM object

* @return jQuery collection of text nodes

*/

function getTextNodes(node){

return $(node).contents().filter(function(){

return (

// text node, or CDATA node

((this.nodeName=="#text" && this.nodeType=="3")

|| this.nodeType=="4") &&

// and not empty

($.trim(this.nodeValue.replace("\n","")) !== "")

);

});

}

 

/**

* Retrieves (text) node value

* @param node {Object}

* @return {String}

*/

function getNodeValue(node){

var textNodes = getTextNodes(node);

var textValue = (node && isNodeComment(node)) ?

// isNodeComment is defined above

node.nodeValue : (textNodes[0]) ? $.trim(textNodes[0].textContent) : "";

return textValue;

}

</script>

 

现在来看看如何设置节点的值(见清单25)。示例代码中有两点需要注意:一是设置根结果的文本值会重写所有子节点。另外就是如果一个节点之前是没有值的,那么就用 node["textContent"]而不是node.textContent。因为在IE中空节点根本就没有textContent属性。

 

Listing 25. Cross-browser JavaScript function for accurate setting of the text value of a node

 

<script type="text/javascript">

function setNodeValue(node, value){

var textNodes = getTextNodes(node);

if (textNodes.get(0)){

textNodes.get(0).nodeValue = value;

}

else {

node["textContent"] = value;

}

}

</script>

 

DOM属性与jQuery

 

在之前的一些例子中已经展示了即使用最原始的JavaScript来处理DOM中的属性也是非常直观明了的了。同样地,jQuery也提供了相应的简化方式。更重要的是,属性可以用在选择器中,非常的强大。

Listing 26. Getting and setting DOM element attributes with jQuery

 

<script type="text/javascript">

var item = $("item[content_id='1']", xmlData);

// select item node with content_id attribute set to 1

var pubDate = item.attr("date_published");

// get value of date_published attribute

item.attr("archive", "true");

// set new attribute called archive, with value set to true

</script>

 

从代码中可以看出,jQuery的attr()方法即可以设置设置也可以返回属性值。更强大的是jQuery允许在选择器中提供属性来返回特定的元素。下如上面的代码所展示的那样,我们获取到了content_id1的元素。

 

通过jQuery的Ajax来装载XML

 

或许你已经有所了解,Ajax是用JavaScript来异步从服务器获取XML的一种Web技术。Ajax本身是依赖XMLHttpRequest (XHR) 所提供的API来向服务器发送请求和从服务器获取响应的。jQuery除了提供强大的用于遍历和处理DOM元素的方法外,还提供了跨浏览器的Ajax支持。也就是说通过Ajax获取XML简单得就是调用Ajax的get方法。清单27展示了这样的例子。

Listing 27. Loading an external XML file with jQuery's Ajax method

 

<script type="text/javascript">

$.ajax({

type : "GET",

url : "/path/to/data.xml",

dataType : "xml",

success : function(xmlData){

var totalNodes = $('*',xmlData).length; // count XML nodes

alert("This XML file has " + totalNodes);

},

error : function(){

alert("Could not retrieve XML file.");

}

});

</script>

 

$.ajax()方法有一系列丰富的选项设置,并且可以通过其他一些简化的变形方式来调用,比如$.getScript()会导入JavaScript脚本并执行,$.getJSON()会获取JSON数据然后可以在Success回调中使用。当装载XML文件时,妳需要了解一下Ajax的基本语法。如上面代码所示,我们设置类型为geturl设置为从"/path/to/data.xml"这个路径获取XML文件,然后还指明文件类型为XML。当从服务器获取了数据后,success error中的一个方法会被触发。本例中,装载成功的话会弹出窗口显示所有节点数目。jQuery的星号选择器表示匹配所有元素。最重要的一点是在回调函数中,第一个参数用来接收从服务器返回的数据。这个参数的名字随便起,接下来的Context就被设置成了这个返回的数据。

在处理Ajax相关的请求时需要注意跨域问题,出于安全性考虑一般不允许从不同的域获取文件。所以上述例子中的代码可能在妳实际的程序中有所不同。

 

像处理XML一样处理外部的XHTML

 

因为XHTML是XML的一个子集,所以像XML一样处理XHTML是完全没有问题的。至于为什么妳有处理XHTML的需求是另一回事,但事实是妳确实可以这样做。比如,导入一个XHTML页面然后从中解析数据是可行的,虽然我会建议用另外更强健的方法来实现。

尽管之前讲述了DOM元素的遍历和处理,jQuery同时也可以用来处理XML,虽然需要先将XML文件破费周折地装载进代码中。本节的内容包含了不同的方法和基本的用于完成XML处理的例子。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery事件代理
事件代理的使用方式
59 0
jQuery_ 绑 定事件处理器上|学习笔记
快速学习 jQuery_ 绑定事件处理器上
83 0
jquery 处理页面的事件详解
jquery事件、修改页面内容
44 0
jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式。 使用JavaScript设置标签的样式相对来说比较麻烦,而如果需要批量的设置多个标签的样式那需要写很多代码,使用jQuery可以为我们简化该过程。
902 0
jQuery|前后台xml交互就靠它了
$.parseXML()函数用于将字符串解析为对应的XML文档。 提示:该函数将使用浏览器内置的解析函数来创建一个有效的XML文档,该文档可以传入jQuery()函数来创建一个典型的jQuery对象,从而对其进行遍历或其他操作。
961 0
jQuery的数组处理
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的介绍,顺便对jQuery数组做个总结.
876 0
+关注
刘哇勇
前端,编程语言相关技术专家
74
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载