WEB开发网
开发学院网页设计JavaScript Dojo QuickStart 快速入门教程 (3) 选择器 阅读

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

 2010-09-14 13:44:59 来源:WEB开发网   
核心提示:虽然到现在为止,留言中还没有一个人看好 Dojo ,Dojo QuickStart 快速入门教程 (3) 选择器,但是我还是准备继续写下去,不保证能写完,9、选择(奇)偶元素arr=dojo.query('a:nth-child(even)');或者arr=dojo.query('> a:

虽然到现在为止,留言中还没有一个人看好 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 快速

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接