dojo1.9学习总结（二）-DOM操作

源代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）:    
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css"
	href="<%=basePath%>dojo/dijit/themes/soria/soria.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>dojo/dojox/grid/resources/soriaGrid.css" />
<style type="text/css">
body,html {
	font-family: helvetica,arial,sans-serif;
	font-size: 90%;
}

th {
	font-size: 13px;
	font-family: Arial,Microsoft YaHei,SimSun,sans-serif !important;
	text-align: center;
}

td {
	font-size: 13px;
	font-family: Arial,sans-serif !important;
}

div #copyright {
	text-align: center
}
</style>
</head>
<script type="text/javascript" src="<%=basePath%>dojo/dojo/dojo.js"
	djConfig="parSEOnLoad:true">
	
</script>
<script type="text/javascript">
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dijit.layout.BorderContainer");
	dojo.require("dijit.layout.AccordionContainer");
	dojo.require("dijit.layout.TabContainer");
	dojo.require("dijit.form.Button");
	dojo.require("dijit.Dialog");
	dojo.require("dojo.parser");
</script>
<script type="text/javascript">
	//dojo.byId dojo.create dojo.place dojo.destroy dojo.empty
	function ById1() {
		var first = dojo.byId("first");
		first.innerHTML = "000";
	}
	function Create() {
		var list = dojo.byId("ul1");
		var third = dojo.byId("third");
		dojo.create("li",{
			innerHTML : "sixth",className : "sixth"
		},list);
		dojo.create("li",{
			innerHTML : "111"
		},third,"after");
	}
	function MoveFirst() {
		var list = dojo.byId("ul1");
		var third = dojo.byId("third");
		dojo.place(third,list,"first");
	}
	function MoveBefore() {
		var second = dojo.byId("second");
		var third = dojo.byId("third");
		dojo.place(second,"before");
	}
	function MoveAfter() {
		var second = dojo.byId("second");
		var third = dojo.byId("third");
		dojo.place(second,"after");
	}
	function MoveEnd() {
		var list = dojo.byId("ul1");
		var third = dojo.byId("third");
		dojo.place(third,list);
	}
	function Destroy() {
		var first = dojo.byId("first");
		dojo.destroy(first);
	}
	function Empty() {
		var list = dojo.byId("ul1");
		dojo.empty(list);
	}

	function query() {
		var list = dojo.query("#list");//id为list的所有元素
		var odd = dojo.query(".odd");//class名为odd的所有元素
		var odd1 = dojo.query("#list .odd");//id为list，且class名为odd的元素
		var odd2 = dojo.query("a.odd");//标签为a，且class名为odd的元素
		var a = dojo.query("#list a");//id为list下标签为a的元素
		var a1 = dojo.query("#list>a");//id为list下直接标签为a的元素
		var a2 = dojo.query(".odd>a");//...
	}
	function AddRed() {
		dojo.query("#list .odd").addClass("red");
	}
	function RemoveOdd() {
		dojo.query(".odd").removeClass("odd");
	}
	function Style() {
		dojo.query(".even").style("color","blue");
	}
</script>
<body class="soria">
	<div id="container">
		<ul id="ul1">
			<li id="first">first</li>
			<li id="second">second</li>
			<li id="third">third</li>
			<li id="fourth">fourth</li>
			<li id="fifth">fifth</li>
		</ul>
		<button data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:MoveFirst">move first</button>
		<button data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:MoveBefore">move before</button>
		<button data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:MoveAfter">move after</button>
		<button data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:MoveEnd">move end</button>
		<button data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:Destroy">destroy first</button>
		<button data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:Empty">Empty list</button>
		<div id="list">
			<div class="odd">One</div>
			<div class="even">Two</div>
			<div class="odd">Three</div>
			<div class="even">Four</div>
			<div class="odd">Five</div>
			<div class="even">Six</div>
			<button data-dojo-type="dijit.form.Button"
				data-dojo-props="onClick:AddRed">add red</button>
			<button data-dojo-type="dijit.form.Button"
				data-dojo-props="onClick:RemoveOdd">remove odd</button>
			<button data-dojo-type="dijit.form.Button"
				data-dojo-props="onClick:Style">style</button>
		</div>
	</div>
</body>
</html>
效果：
dojo1.9学习总结（二）-DOM操作

猜你在找的Dojo相关文章
