然到现在为止，留言中还没有一个人看好 Dojo ，但是我还是准备继续写下去，不保证能写完，也许哪天不想写了，或者另有所爱了，可能就结束了，呵呵。 |
准备工作
这一篇里，Dojo 库直接从 Google 服务器上引用，这样，本机只需要一个 html 页面就可以运行了，调试信息打印用 Firefox + Firebug 插件。整个框架如下，后面一点一点的往里面填代码：
<
html
>
<
head
>
// dojo 库 直接从 Google 服务器上引用，您也可以使用本机库
<
script
type
="text/javascript"
src
="http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js"
></
script
>
<
script
type
="text/javascript"
>
//打印一个元素的信息
function printElement(info,node){ console.debug(info); console.debug(node.innerHTML); console.debug("\n");
} //打印元素数组中每个元素的信息 function printArray(info,arr){ console.debug(info); arr.forEach(function(node){ console.debug(node.innerHTML);}) console.debug("\n"); } //所有代码都从这里执行，所有函数都从这里调用 dojo.addOnLoad(function() { //暂时留空，文中的代码都添加至此处 });
</
script
>
</
head
>
<
body
>
<
a
id
="a1"
href
="#"
>
a1:id=a1
</
a
>
<
a
id
="a2"
href
="#"
>
a2:id=a2
</
a
>
<
div
id
="sub_1"
>
<
a
id
="a3"
href
="#"
>
a3:id=a3
</
a
>
<
a
class
="foo"
href
="#"
>
a4:class=foo
</
a
>
<
a
class
="foo"
href
="#"
>
a5:class=foo
</
a
>
<
h1
>
h1
</
h1
>
<
div
id
="sub_2"
>
<
a
href
="#"
>
a6
</
a
>
<
a
class
="foo"
href
="#"
>
a7:class=foo
</
a
>
<
a
class
="foo"
href
="#"
>
a8:class=foo
</
a
>
<
h1
>
h2
</
h1
>
</
div
>
</
div
>
</
body
>
</
html
>
页面在浏览器中显示如下效果
| a1:id=a1 a2:id=a2 |
脚本代码里有两个自定义的函数 printElement 和 printArray ，这个您不用管他，他们只是负责打印信息，需要留意的代码在后面。
dojo.addOnLoad() 函数是整个程序的入口，就相当于 main 函数。
静态页面里放了8个超链接元素、2个 h1 元素，用他们来做选择试验。
版权声明：本博客文章如非特别注明，均为原创，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园
正式开始
dojo 有两种选择元素的方法：dojo.byId() 和 dojo.query() ，他们的区别是，dojo.byId() 返回一个元素，dojo.query() 返回数组
1、根据 id 选择。选择 id 为 "a1" 的 超链接：
node=dojo.byId(a1);
printElement("dojo.byId(a1):",node);
或者
arr=dojo.query('#a1')//注意这里的 # 符号
printArray("dojo.query('#a1')",arr);
这两段代码效果是一样的，第一段代码返回一个元素，第二段代码返回含有一个元素的数组。您可以将任意一段代码填空到上面框架中的相应位置，运行一下，显示结果如下：
dojo.byId(a1)
a1:id=a1
或者
dojo.query('#a1')
a1:id=a1
2、根据类型选择。选择所有 a （超链接元素）元素
arr=dojo.query('a');
printArray("dojo.query('a'):",arr);
填空运行，会显示8个超链接的innerHTML
3、根据样式名选择。选择所有样式为 foo 的元素
arr=dojo.query(".foo"); //注意这里的 . 符号
printArray("dojo.query('.foo')",arr);
填空运行，会显示a4 a5 a7 a8 四个超链接的innerHTML
4、选择第一个。选择第一个 a 元素
arr=dojo.query('a : first-child');
printArray("dojo.query('a:first-child')",arr);
这里会选中 a1 a3 a6，为什么会出现三个呢？因为这三个都是对应父节点的第一个元素，后面会讲怎么只选当前直接节点下的元素。
5、选择指定节点下的所有子元素（包括间接子元素）。选择 "sub_1" 下的所有 a 元素
arr=dojo.query("a", "sub_1");
printArray("dojo.query('a', 'sub_1')",arr);
或者
arr=dojo.query('#sub_1 a');
printArray("dojo.query('#sub_1 a')",arr);
或者
arr=dojo.query('div#sub_1 a');
printArray("dojo.query('div#sub_1 a')",arr);
这三段代码效果相同，都选中 a3 a4 a5 a6 a7 a8。注意第三种方法，不但指定父节点的 id 为 "sub_1" ，还指定父节点类型为 div
6、选择直接子元素。在指点节点 "sub_1" 的直接子元素中，选择所有 a 元素
arr=dojo.query('> a' , "sub_1"); //注意：大于号后面要有空格
printArray("dojo.query('> a','sub_1'))",arr);
或者
arr=dojo.query('#sub_1 > a'); //注意：大于号后面要有空格
printArray("dojo.query('#sub_1 > a')",arr);
或者
arr=dojo.query('div#sub_1 > a'); //注意：大于号后面要有空格
printArray("dojo.query('div#sub_1 > a')",arr);
这三段代码效果相同，都选中 a3 a4 a5，而间接子节点没有选。这里，> 大于号代表直接子节点，a 代表类型，您可以把 a 换成 h1 或者 * 试试，看看什么效果。
7、根据元素的属性值选择。
arr=dojo.query('a[id=a2]');
printArray("dojo.query('a[id=a2]')",arr);
这里选择 id 属性值 等于"a2"的元素。还有其他判断方法：
element[attr = "bar"] : 属性值等于"bar"
element[attr != "bar"] : 属性值不等于"bar"
element[attr ^= "bar"] : 属性值等于以"bar"开始
element[attr$ = "bar"] : 属性值等于以"bar"结束
element[attr ~= "bar"] : 属性值是一个列表，其中有一个值等于"bar"
element[attr *= "bar"] : 属性值是一个字符串，其中包含"bar"
8、选择第n个元素
arr=dojo.query('a:nth-child(1)');
或者
arr=dojo.query('> a:nth-child(1)');
您现在应该能分辨出两种方法的不同了吧，第一种是全部的，第二种是直接的。
9、选择(奇)偶元素
arr=dojo.query('a:nth-child(even)');
或者
arr=dojo.query('> a:nth-child(even)');
这些应该够用了吧，官方文档里还有更多的方法，看不太懂，到用的时候再说吧！
版权声明：本博客文章如非特别注明，均为原创，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园
所属分类的其他文章:
Dojo QuickStart 快速入门教程 (2) 基本框架
Dojo QuickStart 快速入门教程 (1) Why Dojo
//==========================================
