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

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

标签：

原文地址：http://www.cnblogs.com/sere/p/4897086.html