虽然到现在为止，留言中还没有一个人看好 Dojo ，但是我还是准备继续写下去，不保证能写完，也许哪天不想写了，或者另有所爱了，可能就结束了，呵呵。
另外，相对于效率，我还是更喜欢组织有序的代码，mootools 也是不错，好像组件库现在还不太完善。
最后，自己也是边学边写，很多地方可能有错误，希望大家发现后多多指正。

这一篇来看看选择器吧，其实都大差不差，你要原先玩过 jQuery 或者 Mootools，应该一下就能看明白。

版权声明：本博客文章如非特别注明，均为原创，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园

准备工作
这一篇里，Dojo 库直接从 Google 服务器上引用，这样，本机只需要一个 html 页面就可以运行了，调试信息打印用 Firefox + Firebug 插件。整个框架如下，后面一点一点的往里面填代码：

<html>

<head>

// dojo 库直接从 Google 服务器上引用，您也可以使用本机库

//打印一个元素的信息

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 class="foo" href="#">a4:class=foo</a>

<a class="foo" href="#">a5:class=foo</a>

<a class="foo" href="#">a7:class=foo</a>

<a class="foo" href="#">a8:class=foo</a>

</div>

</body>

</html>

页面在浏览器中显示如下效果

a1:id=a1 a2:id=a2

a3:id=a3 a4:class=foo a5:class=foo

h1

a6 a7:class=foo a8: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 快速入门教程 (2) 基本框架
Dojo QuickStart 快速入门教程 (1) Why Dojo

//==========================================

posted on 2009-05-15 10:23 左洸阅读(2869) 评论(6) 编辑收藏举报

h1

h2

最新随笔

积分与排名

随笔分类 (90)

友情博客

阅读排行榜

推荐排行榜

最新评论