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