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