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

简介:

然到现在为止,留言中还没有一个人看好 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 >
        
< id ="a1"  href ="#" > a1:id=a1 </ a >
        
< id ="a2"  href ="#" > a2:id=a2 </ a >

        
< div  id ="sub_1" >
            
< id ="a3"  href ="#" > a3:id=a3 </ a >
            
< class ="foo"  href ="#" > a4:class=foo </ a >
            
< class ="foo"  href ="#" > a5:class=foo </ a >
            
< h1 > h1 </ h1 >
            
< div  id ="sub_2" >
                
< a   href ="#" > a6 </ a >
                
< class ="foo"  href ="#" > a7:class=foo </ 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

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



本文转自左洸博客园博客,原文链接:http://www.cnblogs.com/myqiao/archive/2009/05/15/1457170.html,如需转载请自行联系原作者

目录
相关文章
|
JavaScript 前端开发 API
JavaWeb快速入门--jQuery
JavaWeb快速入门--jQuery
58 0
|
前端开发 JavaScript Java
zTree 插件的概述 | 学习笔记
快速学习 zTree 插件的概述
142 0
zTree 插件的概述 | 学习笔记
|
JSON JavaScript 前端开发
zTree 插件的入门程序 | 学习笔记
快速学习 zTree 插件的入门程序
223 0
zTree 插件的入门程序 | 学习笔记
|
前端开发
Boostrap快速入门
Boostrap快速入门
73 0
|
JavaScript 索引
JavaWeb--快速入门jQuery(三)
JavaWeb--快速入门jQuery(三)
125 0
JavaWeb--快速入门jQuery(三)
|
JavaScript 前端开发 API
JavaWeb--快速入门jQuery(一)
JavaWeb--快速入门jQuery(一)
131 0
JavaWeb--快速入门jQuery(一)
|
JavaScript 前端开发 数据安全/隐私保护
JavaWeb--快速入门jQuery(二)
JavaWeb--快速入门jQuery(二)
140 0
JavaWeb--快速入门jQuery(二)
|
JavaScript 前端开发 Java
JavaWeb--快速入门JavaScript(二)
JavaWeb--快速入门JavaScript(二)
132 0
JavaWeb--快速入门JavaScript(二)
|
JavaScript 前端开发 开发者
中文代码示例之Vuejs入门教程(一)
中文代码示例教程之Vuejs入门, 记录过程中碰到的问题. Rewrite sample codes in Vuejs official guide by using Chinese naming as much as possible, and take notes of issues found.
962 0
|
JavaScript 前端开发
中文代码示例之Vuejs入门教程(一)问题后续
前文"中文代码示例教程之Vuejs入门"碰到的问题的解决. Solutions to the issues found when rewriting sample codes in Vuejs official guide by using Chinese naming as much as possible.
913 0