雖然到現(xiàn)在為止，留言中還沒有一個(gè)人看好 Dojo ，但是我還是準(zhǔn)備繼續(xù)寫下去，不保證能寫完，也許哪天不想寫了，或者另有所愛了，可能就結(jié)束了，呵呵。 另外，相對于效率，我還是更喜歡組織有序的代碼，mootools 也是不錯(cuò)，好像組件庫現(xiàn)在還不太完善。 最后，自己也是邊學(xué)邊寫，很多地方可能有錯(cuò)誤，希望大家發(fā)現(xiàn)后多多指正。 這一篇來看看選擇器吧，其實(shí)都大差不差，你要原先玩過 jQuery 或者 Mootools，應(yīng)該一下就能看明白。

版權(quán)聲明：本博客文章如非特別注明，均為原創(chuàng)，作者保留所有權(quán)利！歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者左洸和出處BlogJava

準(zhǔn)備工作
這一篇里，Dojo 庫直接從 Google 服務(wù)器上引用，這樣，本機(jī)只需要一個(gè) html 頁面就可以運(yùn)行了，調(diào)試信息打印用 Firefox + Firebug 插件。整個(gè)框架如下，后面一點(diǎn)一點(diǎn)的往里面填代碼：

頁面在瀏覽器中顯示如下效果

a1:id=a1 a2:id=a2 a3:id=a3 a4:class=foo a5:class=foo h1 a6 a7:class=foo a8:class=foo h2

腳本代碼里有兩個(gè)自定義的函數(shù) printElement 和 printArray ，這個(gè)您不用管他，他們只是負(fù)責(zé)打印信息，需要留意的代碼在后面。
dojo.addOnLoad() 函數(shù)是整個(gè)程序的入口，就相當(dāng)于 main 函數(shù)。
靜態(tài)頁面里放了8個(gè)超鏈接元素、2個(gè) h1 元素，用他們來做選擇試驗(yàn)。

版權(quán)聲明：本博客文章如非特別注明，均為原創(chuàng)，作者保留所有權(quán)利！歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者左洸和出處BlogJava

正式開始
dojo 有兩種選擇元素的方法：dojo.byId() 和 dojo.query() ，他們的區(qū)別是，dojo.byId() 返回一個(gè)元素，dojo.query() 返回?cái)?shù)組

1、根據(jù) id 選擇。選擇 id 為 "a1" 的 超鏈接：
node=dojo.byId(a1);
printElement("dojo.byId(a1):",node);
或者
arr=dojo.query('#a1')//注意這里的 # 符號(hào)
printArray("dojo.query('#a1')",arr);
這兩段代碼效果是一樣的，第一段代碼返回一個(gè)元素，第二段代碼返回含有一個(gè)元素的數(shù)組。您可以將任意一段代碼填空到上面框架中的相應(yīng)位置，運(yùn)行一下，顯示結(jié)果如下：
dojo.byId(a1)
a1:id=a1
或者
dojo.query('#a1')
a1:id=a1

2、根據(jù)類型選擇。選擇所有 a  （超鏈接元素）元素
arr=dojo.query('a');
printArray("dojo.query('a'):",arr);
填空運(yùn)行，會(huì)顯示8個(gè)超鏈接的innerHTML

3、根據(jù)樣式名選擇。選擇所有樣式為 foo 的元素
arr=dojo.query(".foo"); //注意這里的 . 符號(hào)
printArray("dojo.query('.foo')",arr);
填空運(yùn)行，會(huì)顯示a4  a5  a7  a8  四個(gè)超鏈接的innerHTML

4、選擇第一個(gè)。選擇第一個(gè) a 元素
arr=dojo.query('a : first-child');
printArray("dojo.query('a:first-child')",arr);
這里會(huì)選中 a1 a3 a6，為什么會(huì)出現(xiàn)三個(gè)呢？因?yàn)檫@三個(gè)都是對應(yīng)父節(jié)點(diǎn)的第一個(gè)元素，后面會(huì)講怎么只選當(dāng)前直接節(jié)點(diǎn)下的元素。

5、選擇指定節(jié)點(diǎn)下的所有子元素（包括間接子元素）。選擇 "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。注意第三種方法，不但指定父節(jié)點(diǎn)的 id 為 "sub_1" ，還指定父節(jié)點(diǎn)類型為 div

6、選擇直接子元素。在指點(diǎn)節(jié)點(diǎn) "sub_1" 的直接子元素中，選擇所有 a 元素
arr=dojo.query('> a' , "sub_1"); //注意：大于號(hào)后面要有空格
printArray("dojo.query('> a','sub_1'))",arr);
或者
arr=dojo.query('#sub_1  > a'); //注意：大于號(hào)后面要有空格
printArray("dojo.query('#sub_1 > a')",arr);
或者
arr=dojo.query('div#sub_1  > a'); //注意：大于號(hào)后面要有空格
printArray("dojo.query('div#sub_1 > a')",arr);
這三段代碼效果相同，都選中 a3 a4 a5，而間接子節(jié)點(diǎn)沒有選。這里，> 大于號(hào)代表直接子節(jié)點(diǎn)，a 代表類型，您可以把 a  換成 h1 或者 * 試試，看看什么效果。

7、根據(jù)元素的屬性值選擇。
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"結(jié)束
element[attr ~= "bar"] : 屬性值是一個(gè)列表，其中有一個(gè)值等于"bar"
element[attr *= "bar"] : 屬性值是一個(gè)字符串，其中包含"bar"

8、選擇第n個(gè)元素
arr=dojo.query('a:nth-child(1)');
或者
arr=dojo.query('> a:nth-child(1)');
您現(xiàn)在應(yīng)該能分辨出兩種方法的不同了吧，第一種是全部的，第二種是直接的。

9、選擇(奇)偶元素
arr=dojo.query('a:nth-child(even)');
或者
arr=dojo.query('> a:nth-child(even)');

這些應(yīng)該夠用了吧，官方文檔里還有更多的方法，看不太懂，到用的時(shí)候再說吧！

版權(quán)聲明：本博客文章如非特別注明，均為原創(chuàng)，作者保留所有權(quán)利！歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者左洸和出處BlogJava 

所屬分類的其他文章:

Dojo QuickStart 快速入門教程 (2) 基本框架
Dojo QuickStart 快速入門教程 (1) Why Dojo

//==========================================