廢話不多說了，直接給大家貼程式碼了，具體程式碼如下圖：
jquery讀取xml檔
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<title>jQuery 读取XML文件-jQuery学习</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-" />
<style type="text/css">
h{color:Green;text-align:center;}
body{ background-color:#EEEEEE ; font-family:微软雅黑; }
#showresult{width:px;overflow:hidden;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/../jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#read").click(function () {
$.ajax({
//请求方式为get
type: "GET",
//xml文件位置
url: "sitemap.xml",
//返回数据格式为xml
dataType: "xml",
//请求成功完成后要执行的方法
success: function (xml) {
$(xml).find("url").each(function (i) {
//i从开始，累加，如果要显示所有数据，将判断去除即可
if (i < ) {
//链接地址
var location = $(this).find("loc").text();
//显示文字
var text = $(this).find("loc").text();
//动态加载方法:链接地址
$("<a>").attr("href", location)
//显示文字
.text(text)
//设置样式
.css({ "width": "px", "float": "left", "margin-bottom": "px" })
//加载到div
.appendTo("#showresult");
}
})
}
});
return false;
});
});
</script>
</head>
<body>
<div id="showresult">
<h>jQuery读取XML文件</h>
<a id="read" href="#" style="width:px;">点击读取XML</a>
</div>
</body>
</html>
js讀取xml檔
<div id="blog_content" class="blog_content"><p><span style="color:#ff0000;">city.xml 文件</span></p><p><?xml version="1.0" encoding="UTF-8"?>
<root name="中国">
<province name="请选择省" postcode="100000" >
<city name="请选择市" postcode="100100" >
<area name="请选择区" postcode="100101" />
</city>
</province>
<province name="北京市" postcode="110000" >
<city name="市辖区" postcode="110100" >
<area name="东城区" postcode="110101" />
<area name="西城区" postcode="110102" />
<area name="崇文区" postcode="110103" />
<area name="宣武区" postcode="110104" />
<area name="朝阳区" postcode="110105" />
<area name="丰台区" postcode="110106" />
<area name="石景山区" postcode="110107" />
<area name="海淀区" postcode="110108" />
<area name="门头沟区" postcode="110109" />
<area name="房山区" postcode="110111" />
<area name="通州区" postcode="110112" />
<area name="顺义区" postcode="110113" />
<area name="昌平区" postcode="110114" />
<area name="大兴区" postcode="110115" />
<area name="怀柔区" postcode="110116" />
<area name="平谷区" postcode="110117" />
</city>
<city name="县" postcode="110200" >
<area name="密云县" postcode="110228" />
<area name="延庆县" postcode="110229" />
</city>
</province>
<province name="天津市" postcode="120000" >
<city name="市辖区" postcode="120100" >
<area name="和平区" postcode="120101" />
<area name="河东区" postcode="120102" />
<area name="河西区" postcode="120103" />
<area name="南开区" postcode="120104" />
<area name="河北区" postcode="120105" />
<area name="红桥区" postcode="120106" />
<area name="塘沽区" postcode="120107" />
<area name="汉沽区" postcode="120108" />
<area name="大港区" postcode="120109" />
<area name="东丽区" postcode="120110" />
<area name="西青区" postcode="120111" />
<area name="津南区" postcode="120112" />
<area name="北辰区" postcode="120113" />
<area name="武清区" postcode="120114" />
<area name="宝坻区" postcode="120115" />
</city>
<city name="县" postcode="120200" >
<area name="宁河县" postcode="120221" />
<area name="静海县" postcode="120223" />
<area name="蓟县" postcode="120225" />
</city>
</province></p><p> <province name="河北省" postcode="130000" >
<city name="石家庄市" postcode="130100" >
<area name="长安区" postcode="130102" />
<area name="桥东区" postcode="130103" />
<area name="桥西区" postcode="130104" />
<area name="新华区" postcode="130105" />
<area name="井陉矿区" postcode="130107" />
<area name="裕华区" postcode="130108" />
<area name="井陉县" postcode="130121" />
<area name="正定县" postcode="130123" />
<area name="栾城县" postcode="130124" />
<area name="行唐县" postcode="130125" />
<area name="灵寿县" postcode="130126" />
<area name="高邑县" postcode="130127" />
<area name="深泽县" postcode="130128" />
<area name="赞皇县" postcode="130129" />
<area name="无极县" postcode="130130" />
<area name="平山县" postcode="130131" />
<area name="元氏县" postcode="130132" />
<area name="赵县" postcode="130133" />
<area name="辛集市" postcode="130181" />
<area name="藁城市" postcode="130182" />
<area name="晋州市" postcode="130183" />
<area name="新乐市" postcode="130184" />
<area name="鹿泉市" postcode="130185" />
</city>
<city name="唐山市" postcode="130200" >
<area name="路南区" postcode="130202" />
<area name="路北区" postcode="130203" />
<area name="古冶区" postcode="130204" />
<area name="开平区" postcode="130205" />
<area name="丰南区" postcode="130207" />
<area name="丰润区" postcode="130208" />
<area name="滦县" postcode="130223" />
<area name="滦南县" postcode="130224" />
<area name="乐亭县" postcode="130225" />
<area name="迁西县" postcode="130227" />
<area name="玉田县" postcode="130229" />
<area name="唐海县" postcode="130230" />
<area name="遵化市" postcode="130281" />
<area name="迁安市" postcode="130283" />
</city>
<city name="秦皇岛市" postcode="130300" >
<area name="海港区" postcode="130302" />
<area name="山海关区" postcode="130303" />
<area name="北戴河区" postcode="130304" />
<area name="青龙满族自治县" postcode="130321" />
<area name="昌黎县" postcode="130322" />
<area name="抚宁县" postcode="130323" />
<area name="卢龙县" postcode="130324" />
</city>
<city name="邯郸市" postcode="130400" >
<area name="邯山区" postcode="130402" />
<area name="丛台区" postcode="130403" />
<area name="复兴区" postcode="130404" />
<area name="峰峰矿区" postcode="130406" />
<area name="邯郸县" postcode="130421" />
<area name="临漳县" postcode="130423" />
<area name="成安县" postcode="130424" />
<area name="大名县" postcode="130425" />
<area name="涉县" postcode="130426" />
<area name="磁县" postcode="130427" />
<area name="肥乡县" postcode="130428" />
<area name="永年县" postcode="130429" />
<area name="邱县" postcode="130430" />
<area name="鸡泽县" postcode="130431" />
<area name="广平县" postcode="130432" />
<area name="馆陶县" postcode="130433" />
<area name="魏县" postcode="130434" />
<area name="曲周县" postcode="130435" />
<area name="武安市" postcode="130481" />
</city>
<city name="邢台市" postcode="130500" >
<area name="桥东区" postcode="130502" />
<area name="桥西区" postcode="130503" />
<area name="邢台县" postcode="130521" />
<area name="临城县" postcode="130522" />
<area name="内丘县" postcode="130523" />
<area name="柏乡县" postcode="130524" />
<area name="隆尧县" postcode="130525" />
<area name="任县" postcode="130526" />
<area name="南和县" postcode="130527" />
<area name="宁晋县" postcode="130528" />
<area name="巨鹿县" postcode="130529" />
<area name="新河县" postcode="130530" />
<area name="广宗县" postcode="130531" />
<area name="平乡县" postcode="130532" />
<area name="威县" postcode="130533" />
<area name="清河县" postcode="130534" />
<area name="临西县" postcode="130535" />
<area name="南宫市" postcode="130581" />
<area name="沙河市" postcode="130582" />
</city>
<city name="保定市" postcode="130600" >
<area name="新市区" postcode="130602" />
<area name="北市区" postcode="130603" />
<area name="南市区" postcode="130604" />
<area name="满城县" postcode="130621" />
<area name="清苑县" postcode="130622" />
<area name="涞水县" postcode="130623" />
<area name="阜平县" postcode="130624" />
<area name="徐水县" postcode="130625" />
<area name="定兴县" postcode="130626" />
<area name="唐县" postcode="130627" />
<area name="高阳县" postcode="130628" />
<area name="容城县" postcode="130629" />
<area name="涞源县" postcode="130630" />
<area name="望都县" postcode="130631" />
<area name="安新县" postcode="130632" />
<area name="易县" postcode="130633" />
<area name="曲阳县" postcode="130634" />
<area name="蠡县" postcode="130635" />
<area name="顺平县" postcode="130636" />
<area name="博野县" postcode="130637" />
<area name="雄县" postcode="130638" />
<area name="涿州市" postcode="130681" />
<area name="定州市" postcode="130682" />
<area name="安国市" postcode="130683" />
<area name="高碑店市" postcode="130684" />
</city>
<city name="张家口市" postcode="130700" >
<area name="桥东区" postcode="130702" />
<area name="桥西区" postcode="130703" />
<area name="宣化区" postcode="130705" />
<area name="下花园区" postcode="130706" />
<area name="宣化县" postcode="130721" />
<area name="张北县" postcode="130722" />
<area name="康保县" postcode="130723" />
<area name="沽源县" postcode="130724" />
<area name="尚义县" postcode="130725" />
<area name="蔚县" postcode="130726" />
<area name="阳原县" postcode="130727" />
<area name="怀安县" postcode="130728" />
<area name="万全县" postcode="130729" />
<area name="怀来县" postcode="130730" />
<area name="涿鹿县" postcode="130731" />
<area name="赤城县" postcode="130732" />
<area name="崇礼县" postcode="130733" />
</city>
<city name="承德市" postcode="130800" >
<area name="双桥区" postcode="130802" />
<area name="双滦区" postcode="130803" />
<area name="鹰手营子矿区" postcode="130804" />
<area name="承德县" postcode="130821" />
<area name="兴隆县" postcode="130822" />
<area name="平泉县" postcode="130823" />
<area name="滦平县" postcode="130824" />
<area name="隆化县" postcode="130825" />
<area name="丰宁满族自治县" postcode="130826" />
<area name="宽城满族自治县" postcode="130827" />
<area name="围场满族蒙古族自治县" postcode="130828" />
</city>
<city name="沧州市" postcode="130900" >
<area name="新华区" postcode="130902" />
<area name="运河区" postcode="130903" />
<area name="沧县" postcode="130921" />
<area name="青县" postcode="130922" />
<area name="东光县" postcode="130923" />
<area name="海兴县" postcode="130924" />
<area name="盐山县" postcode="130925" />
<area name="肃宁县" postcode="130926" />
<area name="南皮县" postcode="130927" />
<area name="吴桥县" postcode="130928" />
<area name="献县" postcode="130929" />
<area name="孟村回族自治县" postcode="130930" />
<area name="泊头市" postcode="130981" />
<area name="任丘市" postcode="130982" />
<area name="黄骅市" postcode="130983" />
<area name="河间市" postcode="130984" />
</city>
<city name="廊坊市" postcode="131000" >
<area name="安次区" postcode="131002" />
<area name="广阳区" postcode="131003" />
<area name="固安县" postcode="131022" />
<area name="永清县" postcode="131023" />
<area name="香河县" postcode="131024" />
<area name="大城县" postcode="131025" />
<area name="文安县" postcode="131026" />
<area name="大厂回族自治县" postcode="131028" />
<area name="霸州市" postcode="131081" />
<area name="三河市" postcode="131082" />
</city>
<city name="衡水市" postcode="131100" >
<area name="桃城区" postcode="131102" />
<area name="枣强县" postcode="131121" />
<area name="武邑县" postcode="131122" />
<area name="武强县" postcode="131123" />
<area name="饶阳县" postcode="131124" />
<area name="安平县" postcode="131125" />
<area name="故城县" postcode="131126" />
<area name="景县" postcode="131127" />
<area name="阜城县" postcode="131128" />
<area name="冀州市" postcode="131181" />
<area name="深州市" postcode="131182" />
</city>
</province></p><p></root></p><p> </p><p><span style="color:#ff0000;">由于文件太长这里就写这几个省吧</span></p><p><span style="color:#ff0000;"> </span></p><p><span style="color:#ff0000;">city.html</span></p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>city.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div>
<span><select id="sheng" style="width: 100px"><option>
请选择省
</option></select></span>
<span><select id="shi" style="width: 100px">
<option>
请选择相应市
</option>
</select></span>
<span><select id="xian" style="width: 100px">
<option>
请选择相应区
</option>
</select></span>
</div>
</body>
</html>
<script type="text/javascript">
<!--
function getXmlDoc() {
var xmldoc;
try{
//IE浏览器
xmlDoc = new ActiveXObject("microsoft.XMLDOM");
}catch(e){
try{
//firefox 其他浏览器
xmlDoc = document.implementation.createDocument("","",null);
}catch(er){
alert("您的浏览器太低了");
}
}
//关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async = false;
//转载xml文件
xmlDoc.load("city.xml");
return xmlDoc;
}</p><p>window.onload = function() {
//通过方法获取对象
var xmlDoc = getXmlDoc();
//获取xml文件的根节点
var root = xmlDoc.documentElement;
//获得所有的省节点
var provinces = root.childNodes;
//获取页面中要显示的省的控件dom对象
var sheng = document.getElementById("sheng");
var shi = document.getElementById("shi");
var xian = document.getElementById("xian");
//遍历所有的省
for(var i=0;i<provinces.length;i++) {
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType == 1) {
//创建option节点对象
var shengopt = document.createElement("option");
//为省节点添加文本节点
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
//为省节点添加属性
shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));
//添加省道页面dom对象中
sheng.appendChild(shengopt);
}
}
//当省节点发生改变时 触发事件
sheng.onchange = function() {
//获取省节点所有的option对象的集合
var shengs = sheng.options;
//获取选中option对象的selectedIndex(下标值)
var num = shengs.selectedIndex;
//清空市 区
shi.length = 1;
xian.length = 1;
var ppostocode = shengs[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++) {
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType == 1) {
var postcode = provinces[i].getAttribute("postcode");
if(postcode == ppostocode) {
var cities = provinces[i].childNodes;
shi.length = 1;
for(var i=0;i<cities.length;i++) {
if(cities[i].nodeType == 1) {
var shiopt = document.createElement("option");
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
shiopt.setAttribute("value",cities[i].getAttribute("postcode"));;
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
shi.onchange = function() {
var shis = shi.options;
var num = shis.selectedIndex;
var spostcode = shis[num].getAttribute("value");
for(var i=0;i<provinces.length;i++) {
if(provinces[i].nodeType == 1) {
var cities = provinces[i].childNodes;
for(var j=0;j<cities.length;j++) {
if(cities[j].nodeType == 1) {
var postcode = cities[j].getAttribute("postcode");
if(postcode == spostcode) {
xian.length = 1;
var areas = cities[j].childNodes;
for(var k=0;k<areas.length;k++) {
if(areas[k].nodeType == 1) {
var xianopt = document.createElement("option");
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}</p><p>
//-->
</script>
<!--
DOM 解析中的浏览器差异所有现代浏览器都支持 W3C DOM 规范。不过，浏览器之间是有差异的。
重要的区别有两点：</p><p>1、加载 XML 的方式
//IE浏览器
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//firefox 其他浏览器
var xmlDoc = document.implementation.createDocument("","",null);
2、处理空白和换行的方式
Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。
思考: 那么怎么解决这种差异呢，下面是一种方法：
for(var i=0;i<provinces.length;i++){ //在输出所有的子节点的时候
if(provinces[i].nodeType==1){//在这里判断该节点是否是元素节点
}
}
要注意的是: xmlDoc.async = false; 写成这样 IE ， fireFox 都可以
xmlDoc.async = "false"; IE 可以 fireFox 会报错
--></p></div>
以上程式碼是講解js、jq讀取xml檔的方法，希望大家喜歡。
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AMJavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。
C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AMC 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。
從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AMJavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。
Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AMPython更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AMJavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
4 週前ByDDD
Atomfall指南：項目位置，任務指南和技巧
1 個月前ByDDD
熱工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
SublimeText3漢化版
中文版，非常好用
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
