Dojo 的核心功能接口 - dojo/query

  这个 dojo/query 模块相信读者们也是非常熟悉了,它主要是基于 CSS 的 Selector 来定位并返回相应节点。其实它使用起来非常简单,本小节我们会重点它的一些不太为人知的特殊功能。

  先来看一个基本使用方式的示例:

1  require(["dojo/query", "dojo/dom"], function(query, dom){ 
2   var nl = query(".someClass", "someId"); 
3   // 或者
4   var node = dom.byId("someId"); 
5       nl = query(".someClass", node); 
6  });

  其主要参数其实很简单,第一个是 Selector 的内容,第二个是根节点的 ID 或者节点对象。这里我们就是查找节点 ID 为“someId”的节点的所有子节点中,包含 someClass 的 Class 属性的所有节点。dojo/query 返回值(这里是 nl)其实是一个 dojo/NodeList 对象,不是我们通常认为的数组对象。当然,它支持数组对象支持的下标运算符“[]”,但是它还包括很多额外的方法, 如:concat,forEach,map,on,lastIndexOf 等等。所以要注意,我们不能简单的把它当成数组对象来对待。

  同 样,还有 dojo/NodeList-data,dojo/NodeList-dom,dojo/NodeList-fx,dojo/NodeList- html,dojo/NodeList-traverse 等等对象,它们扩展了 dojo/NodeList,实现了一些新的功能,如 dojo/NodeList-dom 在 dojo/NodeList 基础上扩展了一些 DOM 操作的接口,让我们可以很方便的批量执行一些 DOM 操作。dojo/NodeList-fx 扩展了一些动画接口,可以批量执行动画。这些接口相信很多读者之前就已经接触过了,这里不再深入,在希望未接触过的读者能注意一下,这些模块对于我们使用 dojo/query 非常有帮助。

  再来看一些稍微复杂一点的示例:

1  dojo.query('#t span.foo:not(span:first-child)'),   
2  dojo.query('#t span.foo:not(:first-child)') 
3 
4  dojo.query('#t h3:nth-child(odd)'),   
5  dojo.query('#t h3:nth-child(2n+1)') 
6 
7  dojo.query('#t2 > input[type=checkbox]:checked')

  前两个例子会返回 ID 为“t”的节点下面,所有的不是其上层节点的第一个子节点的,并且 Class 属性为“foo”或者包含“foo”的所有 span 节点。

  后两个例子会返回 ID 为“t”的节点下面,所有为其上层节点的奇数子节点的 h3节点。

  最后一个例子会返回 ID 为“t2”的节点下面,所有被选中的 checkbox 节点。

  dojo/query 支持所有的 CSS3 的 Selector,感兴趣的读者可以参考一下 W3C 的关于 CSS3 的标准的定义,其中定义的所有 Selector 均可以用在 dojo/query 中。

  既然我们是基于 CSS 的 Selector 来定位并返回节点的,那我们到底是基于哪个版本的 CSS 的 Selector 算法呢?事实上,dojo/query 支持四种 Selector 模式:CSS2,CSS2.1,CSS3,ACME。相比前三个大家都很熟悉了,第四个 ACME 其实是 CSS3 的进阶,除了支持所有 CSS3 的 Selector 外,它还支持一些 Selector 引擎不支持的的检索规则。默认情况下,如果设定 async 为 false,dojo/query 会使用 ACME 模式,如果 async 为 true,则使用 CSS3。

  我们可以通过 dojoConfig 来定义我们所使用的 Selector 模式,也可以在引用 dojo/query 模块的时候指定:

 1  <script data-dojo-config="selectorEngine: 'css2.1', async: true" 
 2  src="dojo/dojo.js"> 
 3  </script> 
 4 
 5  <script type="text/javascript"> 
 6   var dojoConfig = { 
 7     selectorEngine: "css2.1", 
 8     async: true 
 9   }; 
10  </script> 
11  <script src="dojo/dojo.js"> 
12 
13  define(["dojo/query!css3"], function(query){ 
14     query(".someClass:last-child").style("color", "red"); 
15  });

  上述示例中列举了三种方式定义 Selector 模式,读者们可以根据需要自行选择。

  其实 Dojo 还包含其它的 Selector 模式,可以从如下网址下载:

    sizzle: https://github.com/kriszyp/sizzle

    slick: https://github.com/kriszyp/slick

  安装好后,通过之前介绍的方式定义即可:

1  <script data-dojo-config="selectorEngine: 'sizzle/sizzle'" src="dojo/dojo.js"> 
2  </script> 
3 
4  define(["dojo/query!slick/Source/slick"], function(query){ 
5   query(".someClass:custom-pseudo").style("color", "red"); 
6  });

  由此可见,关于 Selector 的模式的定义是非常灵活的,可扩展性非常强。

 

原文地址:http://www.ibm.com/developerworks/cn/web/1303_zhouxiang_dojocore/#major3

posted @ 2015-10-21 10:26  奈河桥  阅读(460)  评论(0编辑  收藏  举报