当前位置 : 主页 > 网页制作 > Dojo >

dojo1.9学习总结(二)-DOM操作

来源:互联网 收集:自由互联 发布时间:2021-06-15
源代码: %@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%%String path = request.getContextPath();// 获得项目完全路径(假设你的项目叫MyApp,那么获得到的地址就是 http://localho

源代码:

<%@ 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, Microsoft YaHei, SimSun, 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, third, "before");
	}
	function MoveAfter() {
		var second = dojo.byId("second");
		var third = dojo.byId("third");
		dojo.place(second, third, "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>

效果:

网友评论