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>
效果如下: