Dojo开发（二）

最新推荐文章于 2024-08-31 07:14:26 发布

原创最新推荐文章于 2024-08-31 07:14:26 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Dojo开发（二）

Dojo 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Dojo Toolkit的基础功能，包括DOM操作、动画效果、元素查询等，并通过实例展示了如何使用Dojo进行DOM元素的选择和样式修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.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>

运行效果如下：
在这里插入图片描述

<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.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>

效果如下：
在这里插入图片描述