jQuery与XML
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_id为1的元素。
通过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的基本语法。如上面代码所示,我们设置类型为get,url设置为从"/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与XML的更多相关文章
- 使用Jquery解析xml的两种方法
第一种方案(最稳妥): 先将String格式的xml转换为xml对象,然后再用Jquery解析xml对象 var returnDataXml = parseXML(returnData); var p ...
- 关于JQUERY操作XML问题!
使用JQUERY操作XML方法: 1.$.get(”xml文件路径",function(data){}); 2.$.Post(”xml文件路径",function(data){}) ...
- 160928、JQuery解析XML数据的demo
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...
- 使用jQuery解析xml时command节点解析失败
jQuery版本1.8.3 待解析的xml为: <message><user><command>Login</command></message& ...
- jquery解析XML(1)
jquery解析XML文件 html代码 <!DOCTYPE html><html><head><title>解析XML</title>&l ...
- JQuery解析XML数据的几个例子
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script ty ...
- JQuery 解析xml
JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml. JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来 ...
- jQuery 查询 xml
加载xml:(注:这个方法在Chrome是用不了的,Chrome是禁止访问本地的xml文件,在ie11里面用不了,ie11的xmlDom文档没有load方法) function loadXML(fil ...
- 轻松使用jquery解析XML
xml文件结构:books.xml <?xml version="1.0" encoding="UTF-8"?><root> &l ...
随机推荐
- ASP.NET MVC Web API使用示例
上篇博客讲解rest服务开发时,曾经提到过asp.net mvc中的rest api,由于篇幅原因,没有在上篇博客中进行讲解,这里专门拿出来进行讨论.还是一样引用上次的案例,用asp.net mvc提 ...
- 遍历 DataSet
DataSet ds=new DataSet ; //获取dataset的第一张table,取其他table只须改下标 DataTable dt=ds.tables[]; //遍历行 foreach( ...
- trigger
trigger() 方法触发被选元素的指定事件 <html><head><script type="text/javascript" src=&quo ...
- css中>,+,~的用法
1.>的用法 A>B选择A的所有子元素B(只选择一代) 2.+的用法 A+B选择紧随着A的兄弟元素B 3.~的用法 A~B选择位置处于A后面的所有兄弟元素B(不包含兄弟元素的子元素)
- 一个空格也可以让html格式显示大不相同
今天在编写html时出现了bug,有两个标签一直贴近显示,但是两段代码完全一样前一段就没有问题. 错误代码如下 <div id="tool1" style="wid ...
- MySQL基础学习之视图
创建新的视图 CREATE VIEW 视图名 AS SELECT 属性,属性1,属性2 FROM 表名 创建新的视图并指定数据名 CREATE VIEW 视图名(新属性,新属性1,新属性2) ...
- VB6-图像分割利器 Microsoft Picture Clip控件
在医院做图像处理时碰到双面扫描仪,需要将扫描到的2张图像分割为一张并打印.在分割图像的过程中总是不得法,后来虽然有CBM666的指导,但给的方法也还是不太方便.无意中在翻一本vb书的时候看到了一个使用 ...
- Delphi中判断WebBrowser的页面是否加载完成
方法一: 在WebBrowser的OnDocumentComplete事件书写代码. 方法二: WebBrowser1.Navigate(Url); while WebBrowser1.Busy or ...
- Ms SQLServer中的Union和Union All的使用方法和区别
Ms SQLServer中的Union和Union All的使用方法和区别 SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 ...
- 角色控制器 Character Controller
Unity中,1个单位尺寸代表1米.即在Unity中创建一个Cube的尺寸是1x1x1米大小. Unity推荐把人的身高定为大约2个Unity单位高度(2米). 为了截取角色的全身照,需要把角色Ins ...