|
Dojo的全称是Dojo Toolkit，始创于2004年，是当前各种蓬勃发展的JS工具包中的佼佼者。Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案，包括核心的 JavaScript 库，简单易用的小部件（Widget）系统和一个测试框架。
Dojo Toolkit 的特性可以分到 4 个不同部分。这种划分使得开发人员可以将库大小保持到最小，确保应用程序性能不受大量 JavaScript 库下载的影响。例如，如果您只需要 Ajax 支持性能，您只需要包含 base 包；不需要包含扩展的 Dijit UI 组件。
Base
Base 包提供 Dojo Toolkit 的基础，包括一些功能，比如 DOM 使用函数、CSS3 基于选择器的 DOM 查询、事件处理、基本的动画、以及 Dojo基于类的面向对象特性。本文主要介绍 Base。
Core
Core 包包含一些 Base 中没有包含的附加特性。通常，这些特性不像 Base 中的特性那样频繁使用；因此，它们单独加载减轻 Base 包的负担。从这一点上来讲，Core 包提供一些实际有用的组件，包括高级动画拖放、I/O、数据管理、国际化（i18n）、浏览器历史管理。
Dijit
Dijit 包包含 Dojo 小部件和组件的扩展 UI 库。这些小部件的一些示例包括对话框、日历、调色板、工具提示和树。它也包括一些表单控件，这比标准 HTML 表单控件提供更多的功能，还有一些完整的布局管理选项。
DojoX
Dojo eXtensions (DojoX) 包含工具箱的各个子项目。位于 DojoX 中的大多数是实验特性，但是也有一些稳定组件和特性。
1 dojo.require()方法
以类似C编程中#include或者Java中import的方式加载所需的部件。
例如： dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
2 dojo.byId()方法
dojo.byId('box')等价于document.getElementById('box')，但dojo.byId能消除不同版本浏览器之间差别。
3 dojo.connect()方法
dojo.connect(obj,event,context,method,dontFix);
参数 |
类型 |
描 述 |
obj |
Object|null |
事件关联的对象。最常见的是DOM node，关联的事件会被委托到DOM事件管理器（除非dontFix为true）；也可以是其他JavaScript Object；或者干脆就是null，这时就是默认为dojo.global （window）。 |
event |
String |
上面obj需要关联的事件的名称。比如DOM node的”onclick”之类的。 |
context |
Object|null |
前面两个参数讲的都是关联的“源”，这儿开始就是讲关联的“目标”了。context为后面的method提供了执行上下文环境，相当于method的this。如果context为null且method是一个function，则method会继承event的context。如果method是一个string，则context必须是method的源对象。如果context为null，则默认为dojo.global。 |
method |
String|Function |
当event被触发后调用的目标函数。可以是函数引用，或者context中的函数名称。此method会拿到和事件同样的参数。 |
dontFix |
Boolean |
可选项。如果obj参数是DOM node，当设置dontFix为true时，可以阻止关联被委托到DOM事件管理器。（貌似很强大的功能） |
样例：
dojo.connect(dojo.byId('box'),'onmouSEOver',null,onmouSEOverEvent);
function onmouSEOverEvent(event)
{
alert('移动事件：'+event);
}
4 dojo.query()方法
选择元素， dojo.uery 不区分大小写。
| 语法 |
含义
|
示例 |
| * |
任何元素 |
dojo.query("*") |
| E |
标签为E的元素 |
dojo.query("div") |
| .C |
带有类C的元素 |
dojo.query(".baz") |
| E.C |
标签为E且带有类C的元素 |
dojo.query("div.baz") |
| #ID |
ID值为ID的元素 |
dojo.query("#quux") |
| E#ID |
标签为E且ID值为ID的元素 |
dojo.query("span#quux") |
| [A] |
带有属性A的元素 |
dojo.query("[foo]") |
| E[A] |
标签为E且带有属性A的元素 |
dojo.query("span[foo]") |
| [A="V"] |
带有A属性且该属性的值为V的元素 |
dojo.query("[foo='bar']") |
| E[A~='V'] |
标签为E并且带有属性A，且该属性值为空格分隔的列表，同时其中一个值恰好等于V的元素 |
dojo.query("span[foo~='bar']") |
| E[A^='V'] |
标签为E并且有属性A，且该属性值以V开头的元素 |
dojo.query("span[foo^='bar']") |
| E[A$='V'] |
标签为E并且带有属性A，且该属性值以V结尾的元素 |
dojo.query("span[foo$='bar']") |
| E[A*='V'] |
标签为E并带有属性A，且该属性值中包含子字符串V的元素 |
dojo.query("span[foo*='bar']") |
| E > F |
作为元素E子元素的F元素 |
dojo.query("div > span") |
| E F |
作为元素E后代元素的F元素 |
dojo.query("E F") |
dojo.query() 返回的结果是 NodeList 对象，NodeList 是一个扩展的 Array 对象，很多方法支持链式调用。作为 Array 对象，NodeList 具有长度属性，而且可以通过 at， forEache， push， pop这些方法来操纵它。需要注意的是 at，map，forEach，slice，splice，contact 等都可以进行链式调用，但是 push，pop，shift 和 unshift 则是不可以的。
样例：
dojo.query("#box");//选择id为box的元素
dojo.query(".red");//选择class为red的元素
//查询出所有的 h1，h2，h3 节点
dojo.query("h1,h2,h3");
//使用伪类选择符，利用 nth-child 来查询 tbody 节点下所有奇数序号的子元素
dojo.query("tbody tr:nth-child(odd)");
//利用 first-child 来查询任意节点下的首个 p 子元素：
dojo.query("p:first-child");
//局部范围内的相对查询
dojo.query("button","thisForm") //查询ID为thisForm表单下的所有button元素
dojo.query("div","box").length
备注：此处ID为thisForm或box前面没有#符号
//链式调用dojo.query(".thinger ").style {border :"1px" }).removeClass("thinger").addClass("thinger2");
NodeList.forEach 方法
dojo.query("div").forEach(function(node,index,array){
node.innerHTML = "new version content!";
});
NodeList.style 方法
// 执行查询
var borders = dojo.query(".thinger").style("border");
// 设置新值
dojo.query(".thinger").style("border","1px solid black");
// 删除，添加 class
dojo.query(".thinger").style({border :" 3px solid red" }).removeClass("thinger").addClass("thinger2");
NodeList.connect 方法
dojo.query("input").connect(" function(e){
alert("new event!");
});
等效于
dojo.query("input").
alert("new event!");
});
NodeList直接支持的事件还包括 omouSEOut,ondblclick 等。
//NodeList 的鼠标事件
dojo.query("p").
dojo.style(e.target,"color","red");
}).
dojo.style(e.target,"blue");
});
自定义NodeList方法
dojo.extend(dojo.NodeList,{
setColor: function(newColor){
this.style({
color: newColor
});
return this;
}
});
dojo.query("p").setColor ("yellow");
注意，此处的关键是“return this”，它保证了后续链式调用的成功执行。
5 dojo.addClass()方法
dojo.addClass("span","blue");//为span元素添加blue类
6 dojo.body()方法
dojo.body方法返回document的body元素。
7 dojo.create方法
dojo.create方法创建一个元素。
dojo.create("div",{ innerHTML: "Hello world!" },dojo.body());
8 dojo.destroy方法
dojo.destroy方法会从父元素中删除该元素，并删掉该元素的所有子元素。
9 dojo.empty方法
dojo.empty方法将删除掉所有子元素。
10 dojo.forEach方法
dojo.forEach方法允许为数组或NodeList定义一个迭代器，来访问数组或NodeList中的每一项，并提供相应的操作。这个方法会忽略返回值，并且是不支持break的。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
