Base 包提供 Dojo Toolkit 的基础,包括一些功能,比如 DOM 使用函数、CSS3 基于选择器的 DOM 查询、事件处理、基本的动画、以及 Dojo 基于类的面向对象特性

类似于Jquery,Dojo里也包含非常实用的函数,特别是在DOM查询获取元素上。接下来举例介绍。

dojo.byId

该函数可以通过id属性选择一个DOM节点。该函数是标准 JavaScript document.getElementById 函数的一个别名,但是显然简短易书写,而且还解决了很多跨浏览器矛盾。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Dojo 开发(二)</title>
</head>
<body>
	<div id="message">今天是我的结婚半年纪念日,Cheers</div>
	<!-- 从cdn加载dojo.js -->
	<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
	<script>
		// DOM 加载完成后触发
		dojo.addOnLoad(function(){
			// 获取id="message"的元素内容
			var msg = dojo.byId("message").innerHTML;
			console.log(msg);
		});
	</script>
</body>
</html>

运行浏览器控制台进行了输出
Dojo开发(二)_Dojo开发(二)

dojo.fadeOut,dojo.fadeIn淡入淡出

<script>
		// DOM 加载完成后触发
		dojo.addOnLoad(function(){
			// 动画特效元素逐渐淡出,对应的淡入为fadeIn
			dojo.fadeOut({
				node:dojo.byId("message"),
				duration:600
			}).play();
		});
	</script>

dojo.query函数,元素的查询获取

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Dojo 开发(二)</title>
</head>
<body>
	<ul id="list">
		<li>第一</li>
		<li>第二</li>
		<li>第三</li>
		<li>第四</li>
		<li>第五</li>
	</ul>
	<!-- 从cdn加载dojo.js -->
	<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
	<script>
		// DOM 加载完成后触发
		dojo.addOnLoad(function(){
			// dojo.query函数的使用
			dojo.query("#list li").forEach(function(item,index){
				console.log("序号="+index+" 内容="+item.innerHTML);
			});
		});
	</script>
</body>
</html>

运行效果如下:
Dojo开发(二)_Dojo开发(二)_02

<body>
	<p>普通段落</p>
	<p class="highlight">高亮段落</p>
	<!-- 从cdn加载dojo.js -->
	<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
	<script>
		// DOM 加载完成后触发
		dojo.addOnLoad(function(){
			// 获取class="highlight",设置背景色yellow,字体颜色red
			dojo.query(".highlight").style({
				backgroundColor:"yellow",
				color:"red"
			});
		});
	</script>
</body>

效果如下:

Dojo开发(二)_dojo_03

还有其他适用的函数,如上一节中的dojo.body函数,它返回文档<body>元素,dojo.create快速创建一个新元素。
dojo.place,它可以将现有的或新创建的元素放在文档的任何地方。dojo.empty清空一个DOM元素的内容,dojo.destroy删除一个节点及其所有子节点。

dojo.empty

该函数传递DOM元素的id,将清空DOM元素的内容,注意元素所占位置并没有销毁。

<body>
	<div>显示的div</div>
	<div id="hide" style="width:300px;height: 30px;">不显示的div</div>
	<!-- 从cdn加载dojo.js -->
	<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
	<script>
		// DOM 加载完成后触发
		dojo.addOnLoad(function(){
			dojo.empty("hide");
		});
	</script>
</body>

效果如下:
Dojo开发(二)_Dojo开发(二)_04