Dojo QuickStart 快速入门教程 (3) 选择器
2010-09-14 13:44:59 来源：WEB开发网虽然到现在为止，留言中还没有一个人看好 Dojo ，但是我还是准备继续写下去，不保证能写完，也许哪天不想写了，或者另有所爱了，可能就结束了，呵呵。
另外，相对于效率，我还是更喜欢组织有序的代码，mootools 也是不错，好像组件库现在还不太完善。
最后，自己也是边学边写，很多地方可能有错误，希望大家发现后多多指正。
这一篇来看看选择器吧，其实都大差不差，你要原先玩过 jQuery 或者 Mootools，应该一下就能看明白。
准备工作
这一篇里，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=a1a2:id=a2a3:id=a3a4:class=fooa5:class=foo h1 a6a7:class=fooa8:class=foo h2 |
脚本代码里有两个自定义的函数 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 Guide 快速入门 (1) Why Dojo
Dojo Quick Start Guide 快速入门 (2) 基本框架
Tags：Dojo QuickStart 快速
编辑录入：爽爽 [复制链接] [打 印]
中查找“Dojo QuickStart 快速入门教程 (3) 选择器”更多相关内容
中查找“Dojo QuickStart 快速入门教程 (3) 选择器”更多相关内容更多精彩
赞助商链接
