`

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

    博客分类:
  • xml
阅读更多

其它的数据地址

 

首先要注意的是,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代码如下:

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

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

jQuery代码如下:

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

2. DOM对象转成jQuery对象

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

jQuery代码如下:

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

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

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

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

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

 

分享到:
评论

相关推荐

    dom4j 解析(读取) xml 节点数据

    此方法解析xml时,不受xml层级的限制。文件中包含了说明文档,java类,以及所使用到的*.jar。并对代码做了注释让你一目了然……

    Java解析XML工具类--(java源码)

    * @param childName 要获取的子节点名称 * @param attributeName 要指定的属性名称 * @param attributeValue 要指定的属性的值 * @return 符合条件的子节点 * @throws Exception 子结点不存在或有多个符合...

    xml入门教程/xml入门教程

    xml文档是有标签和标签中的内容组成的,标签和标签中的内容合成为元素 非空元素 (起始标签) aaa(内容) (结束标签) 空元素 格式良好的XML文档的规范 1)文档声明位于文件的开头&lt;?xml verson="1.0"?&gt; 2)文档中...

    XML纯解析源码(JAVA 不含DOM类)

    * @return 添加根节点标签数量 */ public int add(String path, HTML h, int local) {} /** * 自动解析HTML源代码为结构化标签对象(树) * * @param h * 源代码 */ public void parseHTML(String h) { ...

    串口助手模拟

    (6) Frame为帖单元节点,包括一个Require节点和一个Response,此节点的name和desc属性是可选的,只作为方便维护用,用户也可以不此属性,程序也不读取其中的值 (7) Require为接收报文的匹配值,其下不包括任何子节点...

    Python Cookbook

    12.6 从XML DOM节点的子树中删除仅有空白符的文本节点 451 12.7 解析Microsoft Excel的XML 452 12.8 验证XML文档 454 12.9 过滤属于指定命名空间的元素和属性 455 12.10 用SAX合并连续的文本事件 458 12.11 ...

    Java开发实战1200例(第1卷).(清华出版.李钟尉.陈丹丹).part3

    实例245 读取XML文件属性 310 第3篇 窗体与控件应用 第11章 窗体设计 314 11.1 设置窗体位置 315 实例246 控制窗体加载时的位置 315 实例247 设置窗体在屏幕中的位置 315 实例248 从上次关闭位置启动窗体 316 实例...

    freemarker总结

    节点变量表示为树型结构中的一个节点,通常在XML处理中使用。 在模板里对sequences和hashes初始化 sequences 1. [“you”,”me”,”he”] 2. 1..100 3. [ {“Akey”:”Avalue”},{“Akey1”:”Avalue1”}, {“B...

Global site tag (gtag.js) - Google Analytics