js读取XML，取值，获取当前节点标签的标签名称

最新推荐文章于 2024-06-19 11:11:40 发布

sfkong31893189

最新推荐文章于 2024-06-19 11:11:40 发布

阅读量1.4k

点赞数

分类专栏： xml 文章标签： XML jQuery JavaScript Ajax Cache ViewUI

本文链接：https://blog.csdn.net/sfkong31893189/article/details/83888355

版权

xml 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

其它的数据地址

首先要注意的是，js读取xml文件应该放置到服务器启动：

1.scene.xml

<?xml version="1.0" encoding="utf-8" ?>
<回家>
	<灯光>
			<设备 id="1"  name="客厅顶灯" value="1"></设备>
			<设备 id="1"  name="客厅壁灯" value="2"></设备>
	</灯光>
		<窗帘>
			<设备 id="1"  name="客厅窗帘" value="1"></设备>
			<设备 id="1"  name="主卧窗帘" value="2"></设备>
	</窗帘>
</回家>

2.xmlTest.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>jquery xml解析</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<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" />
		<script type="text/javascript" src="http://static.woyo.com/js/jquery/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
	$(document).ready(
			function() {
				$.ajax( {
					url : "scene.xml",
					dataType : "xml",
					error : function(xml) {
						alert('error loading XML document' + xml);
					},
					success : function(xml) {
						$(xml).find("回家 >灯光>设备").each(function() {
							var id = $(this).attr("id");
							var name = $(this).attr("name");
							var value = $(this).attr("value");
						//alert(name+":"+value);//取得属性的方法 
								$("#lighting").prepend("<option value=" + value + ">" + name+ "</option>");
							});
						$(xml).find("回家 > 窗帘>设备").each(function() {
							var id = $(this).attr("id");
							var name = $(this).attr("name");
							var value = $(this).attr("value");
								$("#curtain").prepend(
										"<option value=" + value + ">" + name
												+ "</option>");
							});
					}
				})
			});
</script>
	</head>
	<body>
		<select id="lighting" name="lighting">
			<option>
				灯光选择
			</option>
		</select>
		<select id="curtain">
			<option>
				窗帘选择
			</option>
		</select>
	</body>
</html>

获取xml节点标签的值的方法，应该先将jquery对象转化为dom对象,如下红色所示部分

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>jquery xml解析</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<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" />
		<script type="text/javascript" src="http://static.woyo.com/js/jquery/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
	$(document).ready(
			function() {
				$.ajax( {
					url : "scene.xml",
					dataType : "xml",
					error : function(xml) {
						alert('error loading XML document' + xml);
					},
					success : function(xml) {
						$(xml).find("回家 >灯光>设备").each(function() {
							var id = $(this).attr("id");

							var $tag=$(this);

							var tagName=$tag[0];

							var name=tagName.tagName;

							var name = $(this).attr("name");
							var value = $(this).attr("value");
						//alert(name+":"+value);//取得属性的方法 
								$("#lighting").prepend("<option value=" + value + ">" + name+ "</option>");
							});
						$(xml).find("回家 > 窗帘>设备").each(function() {
							var id = $(this).attr("id");
							var name = $(this).attr("name");
							var value = $(this).attr("value");
								$("#curtain").prepend(
										"<option value=" + value + ">" + name
												+ "</option>");
							});
					}
				})
			});
</script>
	</head>
	<body>
		<select id="lighting" name="lighting">
			<option>
				灯光选择
			</option>
		</select>
		<select id="curtain">
			<option>
				窗帘选择
			</option>
		</select>
	</body>
</html>

jQurey对象和DOM对象的相互转换

1. jQuery对象转成DOM对象

jQuery提供两种方式来将一个jQuery对象转换成DOM对象：[ index ]和get( index )。

(1) jQuery对象是一个数组对象，可以通过 [index] 的方式，来得到相应的 DOM 对象。

jQuery代码如下：

var $cr = $("#cr"); // jQuery对象
var cr = $cr[0]; // DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了

(2) 另一种方式是jQuery本身提供的，通过get(index) 方法，来得到相应的 DOM 对象。

jQuery代码如下：

var $cr = $("#cr"); // jQuery对象
var cr = $cr.get(0); // DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了

2. DOM对象转成jQuery对象

对于已经是一个DOM对象的，只需要用$( ) 把 DOM对象包装起来，就可以获得一个如假包换的jQuery对象了。方式为 $( DOM对象)。

jQuery代码如下：

var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); // jQuery 对象

转换后，就可以任意使用jQuery中的方法了。

通过以上提供的方法，我们可以任意的相互转换 jQuery对象和DOM对象。

最后再次强调下，DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法的，但jQuery对象提供了一套更加完善的工具用于操作DOM。。

注：我们所用的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

sfkong31893189

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js读取XML，取值，获取当前节点标签的标签名称

其它的数据地址首先要注意的是，js读取xml文件应该放置到服务器启动： 1.scene.xml &lt;?xml version="1.0" encoding="utf-8" ?&gt;&lt;回家&gt; &lt;灯光&gt; &lt;设备 id="1" name="客厅顶灯" value="1"&am
复制链接

扫一扫

专栏目录