`

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

    博客分类：
  • xml
XMLjQueryJavaScriptAjaxCache 
阅读更多

其它的数据地址

 

首先要注意的是，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. 

  2. 
var  cr     =    $cr[0];        // DOM对象  

    3. 

  3. alert(cr.checked)              //检测这个checkbox是否被选中了 
    4.

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

jQuery代码如下：

    

  1. var $cr    =     $("#cr");        // jQuery对象  
    2. 

  2. 
var cr     =     $cr.get(0);      // DOM对象  

    3. 

  3. alert(cr.checked)             //检测这个checkbox是否被选中了 
    4.

2. DOM对象转成jQuery对象

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

jQuery代码如下：

    

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

  2. 
var $cr   =   $(cr);                            // jQuery 对象 

    3.

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

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

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

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

 

分享到：
| 处理保存XML编码问题的解决方法(2)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    dom4j 解析（读取） xml 节点数据

    然后，使用`reader`读取XML文件并获取`Document`对象，`Document`代表整个XML文档： ```java File xmlFile = new File("path_to_your_xml_file.xml"); Document document = reader.read(xmlFile); ``` 这里的`path...

    C#操作XML取值

    ### C#操作XML取值与修改详解 #### 一、简介 在.NET框架中，C#提供了多种方式来处理XML文档，包括`XmlDocument`、`XDocument`等类。这些类可以帮助开发者轻松地读取、修改和创建XML文档。本篇文章将重点介绍如何...

    PB 读取XML文件 实例

    标题 "PB 读取XML文件 实例" 涉及的是使用PowerBuilder（PB）这一编程工具处理XML文件的方法。PowerBuilder（PB）是Sybase公司开发的一种强大的客户端/服务器应用程序开发工具，它支持多种数据源，包括XML。在PB ...

    javascript xml xsl取值及数据修改第1/2页

    首先，让我们看看如何在JavaScript中读取XML文档。在浏览器环境中，可以使用`DOMParser`对象解析XML字符串成DOM（Document Object Model）树。例如： ```javascript let xmlString = `&lt;?xml ... ?&gt; ...`; // ...

    halcon XML文件处理函数,halcon函数手册,Halcon源码.zip

    - `get_xml_node_value`：获取XML节点的值，可以是文本、数字或其他数据类型。 - `set_xml_node_value`：修改XML节点的值，允许在不改变整体结构的情况下更新数据。 - `create_xml_node` 和 `delete_xml_node`：...

    Python中base64与xml取值结合问题

    结合base64与xml取值的问题，通常涉及到在Python中读取XML文档中的某个元素的文本值，并将其编码为base64字符串，或者相反的操作，即将base64编码的字符串解码，还原为原始的XML元素值。在实际应用中，这种方法可以...

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

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

    js树形结构，可在txt中取值

    JavaScript中的树形结构是一种数据结构，它模仿了自然界中的树，具有层次分明的节点关系。在编程中，这种结构常用于表示目录结构、文件系统、组织关系或解析XML/JSON等复杂数据。在这个场景中，我们需要将一个用if、...

    jQuery 滚动投票程序 使用XML或动态取值.zip

    程序会读取XML文件，将数据解析为JavaScript对象，并在页面上显示。 另一方面，"动态取值"通常指的是通过Ajax（Asynchronous JavaScript and XML）技术从服务器获取数据。Ajax允许网页在不重新加载整个页面的情况下...

    XML链接和文档处理代码

    2. SAX：是一种事件驱动的解析器，逐行读取XML文档，遇到元素、属性等事件时触发回调函数。SAX适用于大型XML文档，因为它不将整个文档加载到内存。 总结来说，XML链接和文档处理涉及XML文档间的关联、结构的定义和...

    XML纯解析源码（JAVA 不含DOM类）

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

    Dom4j 解析Xml文档及 XPath查询 学习笔记

    3. **遍历XML节点**：通过`Document`对象获取`Element`节点，再通过`Element`节点的`elements()`方法获取子元素，或者通过`element()`方法获取特定名称的子元素。此外，还可以用`attribute()`方法获取属性值。 ```...

    delphi树RzCheckTree_tree说明保存及提取

    1. 获取节点状态：首先，我们需要遍历RzCheckTree的所有节点，获取每个节点的选中状态。这可以通过TTreeNode的Checked属性来实现。遍历可以通过递归方式或者使用Invalidate函数配合OnDrawNode事件完成。 ```delphi ...

    C#读取web.config配置，建立高速缓存机制

    它的结构类似于XML，包含特定的配置节点和属性，用于存放应用程序需要的配置信息。通过在web.config中添加节点，并在其中使用子节点来增加配置项，可以将这些配置信息集中管理。例如，可以添加如下配置项： ```xml ...

    c#.net常用函数和方法集

    **1.1 获取当前年月日时分秒** ```csharp System.DateTime currentTime = System.DateTime.Now; ``` 这里 `System.DateTime.Now` 返回的是当前系统的日期与时间。`currentTime` 变量存储了这一时刻的信息。 **1.2 ...

    串口助手模拟

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

    Visual C#常用函数和方法集汇总

    **1.1 获取当前日期时间** - **语法:** `System.DateTime currentTime = System.DateTime.Now;` - **功能:** 此代码片段用于获取系统当前的日期时间。 - **示例:** `System.DateTime currentTime = System.DateTime...

Magicbox
Global site tag (gtag.js) - Google Analytics