Dojo开发(二)

本文介绍了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>

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

分三个包上传时,第三个包好像传不上去,我给整合了一下,打在一个包里上传了! dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 Dojo和JSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与包) Dojo学习笔记-- djConfig解说 Dojo学习笔记-- dojo.dom Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo学习笔记--ValidationTextbox Dojo学习笔记--dijit.Dialog Dojo学习笔记--dijit.Menu Dojo学习笔记--dijit.TitlePane Dojo学习笔记--dijit.Tooltip Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的TitlePane Dojo学习笔记--页面部分区域遮挡,DialogUnderlay Dojo学习笔记(五)-djConfig详解 dojo data 接口详解 dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane dojo学习笔记(四) dojo的拖拽示例以及疑问! 介绍dojo事件 使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端 利用Dojo实现拖动(Drag and Drop)效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄宝康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值