jQuery-DOM

2019独角兽企业重金招聘Python工程师标准>>>

jQuery提供过了方便的方法可以对XML文件进行解析：

<?xml version="1.0" encoding="GB2312"?>
<china><province name="吉林省"><city>长春</city><city>吉林市</city><city>四平</city><city>松原</city><city>通化</city></province><province name="辽宁省"><city>沈阳</city><city>大连</city><city>鞍山</city><city>抚顺</city><city>铁岭</city></province><province name="山东省"><city>济南</city><city>青岛</city><city>威海</city><city>烟台</city><city>潍坊</city></province>
</china>

解析方法：

<body><select id="province" name="province"><option value="">请选择....</option></select><select id="city" name="city"><option value="">请选择.....</option></select></body> <script language="JavaScript">/** jquery通过$.get()或者$.post()方法来解析并加载xml文件* *  * 以$.get(url,callback)方法为例*         * url：要解析的xml文件的路径*      * callback：回调函数，function(xml){}*          * xml：解析后的内容*/$.get("cities.xml",function(xml){var docXml = xml;//在jquery中使用标签名来查找对应标签，利用find()方法，传入标签名var $provinceXmlElements = $(docXml).find("province");$provinceXmlElements.each(function(index,domEle){var $provinceXmlValue = $(domEle).attr("name");/** <select id="province" name="province"><option value="">请选择....</option></select>*/var $option = $("<option></option>");$option.attr("value",$provinceXmlValue);$option.text($provinceXmlValue);var $provinceElement = $("#province");$provinceElement.append($option);});$("#province").change(function(){var $provinceValue = $("#province").val();//清空/** <select id="city" name="city"><option value="">请选择.....</option><option value="长春">长春</option></select>*/
//                  $("#city option[value!='']").each(function(index,domEle){
//                      $(domEle).remove();
//                  });$("#city option[value!='']").remove();$provinceXmlElements.each(function(index,domEle){var $provinceXmlValue = $(domEle).attr("name");if($provinceValue==$provinceXmlValue){var $cityXmlELements = $(domEle).find("city");$cityXmlELements.each(function(index,domEle){var $cityXmlValue = $(domEle).text();/** <select id="city" name="city"><option value="">请选择.....</option></select>*/var $option = $("<option></option>");$option.attr("value",$cityXmlValue);$option.text($cityXmlValue);var $cityElement = $("#city");$cityElement.append($option);});}});});});</script>
</html>

转载于:https://my.oschina.net/u/1765238/blog/293882

jQuery-DOM相关推荐

jQuery DOM
jQuery DOM属性 1. .addClass(className):为每个匹配的元素添加指定的样式类名 2. .attr(attributeName):获取匹配的元素集合中的第一个元素的属性值. ...
jQuery DOM/属性/CSS操作
jQuery DOM 操作创建元素只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
jQuery DOM操作之查找结点
下面是对jQuery DOM操作中查找结点的整理,希望可以帮助到有需要的小伙伴. 1.查找元素节点使用jQuery中的选择器用法可以完成查找结点的操作,相对于DOM,jQuery更方便 2.查找属性 ...
jquery dom 节点append、before、after、prepend、insertBefore、empty、remove等添加、移除操作汇总
之前有个项目前端页面会根据权限进行DOM操作,比如:增加新增.编辑按钮,增加表格操作列等,涉及节点新增.某个节点前后插入.节点移除等操作,在此,对jquery DOM节点的各种操作做一总结. 1.父节 ...
JQuery DOM基本操作
DOM操作的分类 DOM Core 并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它. 它的用途并非仅限与处理网页,也可以用来处理任何一种使用标记语言编写出来的文档.例如X ...
【学亮IT手记】jQuery DOM删除操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
【学亮IT手记】jQuery DOM插入操作
DOM插入操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
jQuery DOM 节点操作
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...
jQuery DOM元素的遍历
目录 ⏹方式1: `$().each()` ⏹方式2: `$.each()` ⏹方式3: `$().toArray() + for of` ⏹方式4: `Array.from() + for of` ...

jQuery-DOM

jQuery-DOM相关推荐

最新文章

热门文章