现在我们开始学习一个新的框架dojo，dojo的介绍
dojo官网下载dojo-release-1.11.2.zip，解压缩后，修改文件夹名称dojoroot，放到ROOT目录下。输入下面的网址：http://localhost:8080/dojoroot/dijit/themes/themeTester.html。如果能正常打开就说明安装完成。自己进行书写页面，但是必须要通过tomcat或者其他服务器才能加载。
实现一个tab小控件：
<html> <head> <script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"> </script> <style type="text/css"> @import "../dojoroot/dijit/themes/tundra/tundra.css"; @import "../dojoroot/dojo/resources/dojo.css"; </style> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer");</script> <style> .formContainer{ width:600px; height:600px; } label{ width:150px; float:left; } </style> </head> <body class="tundra"> <div class="formContainer" dojoType="dijit.layout.TabContainer"> <div dojoType="dijit.layout.ContentPane" title="Personal"> 123 </div> <div dojoType="dijit.layout.ContentPane" title="Address"> 321 </div> <div dojoType="dijit.layout.ContentPane" title="phone"> 456 </div> </div> </body> </html>现在是不是感受到dojo的魅力了吧，那就让我们接下去学习吧！
创建添加元素（dojo.addOnLoad，dojo.create）：
<html> <head> <title>Exploring Dojo</title> </head> <body> <h1>Exploring Dojo</h1> <div id="message">This is a DIV element with id attribute message.</div> <ul id="list"> <li>This is the first item in a list</li> <li class="highlight">This is the second item in a list</li> <li>This is the third item in a list</li> </ul> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"> </script> <script> dojo.addOnLoad(function() {//添加元素 dojo.create(//创建元素 "div",//元素类型 { "innerHTML": "Hello, World!"//内容 }, dojo.body();//添加的地址 ); }); </script> </body> </html>相对于[原生的js代码，这无疑简便许多
元素逐渐淡出（dojo.fadeOut）：
<html> <head> <title>dojo</title> </head> <body> <h1>dojo</h1> <div id="message">This is a DIV element with id attribute message.</div> <ul id="list"> <li>This is the first item in a list</li> <li class="highlight">This is the second item in a list</li> <li>This is the third item in a list</li> </ul> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"> </script> <script> alert(dojo.byId("message").innerHTML);//浏览器获取到id为message内部的信息 dojo.fadeOut({//可以看到对应的id元素逐渐淡出，从页面上消失了。 node: dojo.byId("message"),//node：哪一个元素 duration: 6000//duration: 这个状态要经过多少时间 时间单位：毫秒 }).play(); // dojo.fadeIn({//可以看到对应的id元素逐渐显示，从页面上呈现了，两个不能同时使用 // node: dojo.byId("message"), // duration: 600 // }).play(); </script> </body> </html>获取对应的元素（dojo.query）：
dojo.query("#list li").forEach(function(item) {//dojo.query("#list li")获取到全部#list的li console.log(item.innerHTML);//forEach对这个数组进行遍历 });修改对应元素的css属性：
<html> <head> <title>dojo</title> </head> <body> <h1>dojo</h1> <div id="message">This is a DIV element with id attribute message.</div> <ul id="list"> <li>This is the first item in a list</li> <li class="highlight">This is the second item in a list</li> <li>This is the third item in a list</li> </ul> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"> </script> <script> dojo.query(".highlight").style({//获取到highlight的css属性 backgroundColor: "yellow",//改变css属性 color: "red" }); </script> </body> </html>jquery是如何使用的呢？
$('.highlight').css('background','#ccc');两者差不多一样简便，那我们为什么要使用dojo呢？ dojo与jquery的区别
其他函数包括 dojo.place，它允许您将现有的或新创建的元素放在文档的任何地方。dojo.empty 只执行您所期望的 — 清空一个 DOM 元素的内容。dojo.destroy 删除一个节点以及其所有子元素。
函数遍历（dojo.forEach）：
var list = ['123','234','345','456']; dojo.forEach(list, function(item, i) { console.log((i+1)+'. '+item); }); 输出： 1. 123 2. 234 3. 345 4. 456通过命名函数来对forEach进行使用：
var list = ['123','234','345','456']; var printArray = function(item, i) { console.log((i+1)+'. '+item); } dojo.forEach(list, printArray);在数组中找到具体的位置（dojo.indexOf）： dojo.indexOf(list, “234”); 找到“234”在list中的具体位置，当返回数据是“-1”时，说明找寻不到这个值。
创建一个新数组（dojo.filter）：
var filteredList = dojo.filter(list, function(item) { return item != "123"; }); dojo.forEach(filteredList, "console.log(item)");dojo.filter(list, function(item) 创建一个新数组，是为原先list的更新版。 return item != “123”;去除原先的数组中的‘123’元素。
其他的还有：dojo.map 函数允许您创建一个新数组 — 现有数组的修改版。dojo.every 用于检查是否每一项匹配指定标准。
相关学习： web前端之dojo实际应用及开发六：页面布局（附有源码） web前端之dojo实际应用及开发五：丰富的用户界面（附有源码） web前端之dojo实际应用及开发四：面向对象开发[关键]（附有源码） web前端之dojo实际应用及开发三：dojo.xhr* 增强 Ajax（附有源码） web前端之dojo实际应用及开发二：事件处理（附有源码） web前端之dojo实际应用及开发一：开始dojo（附有源码） web前端之Dojo与jQuery综合比较分析 web前端之dojo(用javascript语言实现的开源DHTML工具包)
