Dojo QuickStart 快速入门教程 (3) 选择器

Dojo QuickStart 快速入门教程 (3) 选择器

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

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

准备工作
这一篇里，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 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 元素，用他们来做选择试验。

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

正式开始
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)');

这些应该够用了吧，官方文档里还有更多的方法，看不太懂，到用的时候再说吧！

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

所属分类的其他文章:

Dojo QuickStart 快速入门教程 (2) 基本框架
Dojo QuickStart 快速入门教程 (1) Why Dojo

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