2011年5月7日随笔档案 - 发仔

dojo.query("selector") 写法支持的事件如下：

.onclick(function(){...})

.onmouseover(function(){...});

.onmouseout(function(){...});

.onmousedown(...)

.onmouseenter(...)

.onmouseleave(...)

.onmousemove(...)

.onchange(...)

.onclick(...)

.onfocus(...)

.onblur(...)

.onkeydown(...)

.onkeypress(...)

.onkeydown(...)

.onload(..)

.onsubmit(...)

等，跟jquery差不多

通常使用connect写法

dojo.query("selector").connect("on...",function(){...});

或

dojo.connect(obj,"on...",function(){...})

指定事件的this上下文,3个参数写法

dojo.query("selector").connect("on...",contextObj,function(){...});

dojo.query选择器与jquery有些相似，也是提供链式写法。

简单介绍几种情况：

1、ID

dojo.query("#ID")

2、节点

dojo.query("tagName");

3、样式名

dojo.query(".className");

4、添加和删除样式

dojo.query("selector").addClass("className")

dojo.query("selector").removeClass("className");

5、循环处理

dojo.query("selector").forEach(function(node){

...

})

6、绑定事件（两种写法）

第一种：

dojo.query("selector").onclick(function(){

})

第二种：

dojo.query("selector").connect("onclick",function(){

});

相关演示HTML代码

<html>
<head>
    <title></title>
    <style type="text/css">
    .odd {background-color:#eee}
    </style>
    <script src="script/dojo/dojo.js.uncompressed.js" type="text/javascript"></script>
    <script type="text/javascript">
        dojo.ready(function () {
            alert("第一个节点用红色标记");
            dojo.query("#one").style("color", "red");
            alert("隐藏odd样式的节点");
            dojo.query(".odd").style({ display: "none" });
            alert("再显示出来");
            dojo.query(".odd").style({ display: "" });
            alert("循环odd样式的节点，增加索引文字");
            dojo.query(".odd").forEach(function (node, i) {
                node.innerText += i + 1;
            });
            alert("定义odd样式点击事件");
            dojo.query(".odd").onclick(function () {
                alert("我的id是：" + this.id);
            });
            alert("响应第一个节点点击事件");
            dojo.query(".odd")[0].click();
        });
    </script>
</head>
<body>
    <ul id="root">
      <li id="one" class="odd">这是第一节点</li>
      <li id="two">这是第二节点</li>
      <li id="three" class="odd">这是第三节点</li>
      <li id="four">这是第四节点</li>
      <li id="five" class="odd">这是第五节点</li>
      <li id="six">这是第六节点</li>
    </ul>
</body>

</html>

常用的DOM操作有：

1、创建新节点

2、节点移动

3、清空和删除节点

创建新节点的操作：

<html>
<head>
    <title></title>
    <script src="script/dojo/dojo.js.uncompressed.js" type="text/javascript"></script>
    <script type="text/javascript">
        dojo.ready(function () {
            //创建节点
            dojo.create("li", { id: "seven", innerText: "这是第七个节点" }, "root");

        });
    </script>
</head>
<body>
    <ul id="root">
      <li id="one">这是第一节点</li>
      <li id="two">这是第二节点</li>
      <li id="three">这是第三节点</li>
      <li id="four">这是第四节点</li>
      <li id="five">这是第五节点</li>
      <li id="six">这是第六节点</li>
    </ul>
</body>
</html>

使用VS2010可以在编码时智能提示

dojo.create包括4个参数

第一个参数：tag 标签名称

第二个参数：attrs 属性集合

第三个参数：refNode 相对节点

第四个参数：pos 位置，包括：

"before", "after", "replace", "only", "first", and "last".

即：前、后、替换、替换子节点，第一，最后

空值时默认last，即：追加到最后

移动节点的操作：

使用dojo.place方法

如上图编码智能提示

dojo.place的四个参数：

node:所要操作的节点

refNode：相对节点

position：放置位置

清空和删除操作：

清空：dojo.empty(node)

删除：dojo.destory(node)

完整示例的HTML

<html>
<head>
    <title></title>
    <script src="script/dojo/dojo.js.uncompressed.js" type="text/javascript"></script>
    <script type="text/javascript">
        dojo.ready(function () {
            //创建节点
            dojo.create("li", { id: "seven", innerText: "这是第七个节点" }, "root");
            alert("已创建节点");
            //移动节点
            dojo.place("seven", "six", "before");
            alert("移动节点");
            //清空节点
            dojo.empty("seven");
            alert("清空节点");
            //删除节点
            dojo.destroy("seven");
            alert("删除节点");
        });
    </script>
</head>
<body>
    <ul id="root">
      <li id="one">这是第一节点</li>
      <li id="two">这是第二节点</li>
      <li id="three">这是第三节点</li>
      <li id="four">这是第四节点</li>
      <li id="five">这是第五节点</li>
      <li id="six">这是第六节点</li>
    </ul>
</body>
</html>

第一步：新建项目

第二步：下载dojo，并放到script文件夹

下载网址：http://dojotoolkit.org/download/

目前最新版：http://download.dojotoolkit.org/release-1.6.0/dojo-release-1.6.0.zip

也可下载源码。

第三步：新建第一个页面（1.html）

dojo.ready(function () {

alert(dojo.version);

});

</script>

这里的dojo.ready写法相当于jquery的 $(function(){});，即页面加载时执行。

一、教程

1、Hello dojo

2、dom 方法

3、使用dojo.query

4、dojo 事件

5、dojo 特效

6、动画

7、数组

8、Ajax

9、延迟（Deferreds）入门

10、延迟约定

11、介绍 dijit、dojox

11、dijit Editor （可视化编辑器）

12、 Dialog & ToolTips （对话框和提示框）

13、Dijit layout （布局）

14、编译生成

15、HTML5文件上传

16、Dojo Charting 图表

17、高级图表

18、Dojo Object Store 对象存取

19、程序控制