MooTools教程(2):DOM選擇器

若是你尚未準備好，請先閱讀上一篇《Mootools 1.2教程(1)——MooTools介紹》。咱們講了怎麼引用MooTools 1.2以及怎麼在domready裏面調用你的腳本。

今天開始本系列教程的第2講。在這一講中，咱們會學習幾種選擇HTML元素的方法。在許多方面，這是MooTools用得最多最基本的。畢竟，要建立一個基於HTML元素的交互性用戶體驗，你必須首先把它們掌握在手中。

基本的方法

$();

$函數是MooTools中基本的選擇器。你能夠經過它來根據一個ID選擇DOM元素。

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇ID爲」body_wrap「的元素
2. $('body_wrap');

參考代碼：  [複製代碼]  [保存代碼]

1. "body_wrap">

.getElement();

.getElement();擴展了$方法，可讓你簡化你的選擇操做。例如，你能夠經過$方法來選擇ID爲」body_wrap「的元素，而後選 擇第一個子節點。.getElement();只選擇一個元素，若是有多個符合要求的元素則返回第一個元素。若是你給.getElement();方法一 個CSS類名做爲參數，你就會獲得第一個有這個CSS類名的元素，而不是函數全部元素的數組。要選擇多個元素，則可使用下面 的.getElements();方法。

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇ID爲」body_wrap「的元素下面的第一個連接
2. $('body_wrap').getElement('a'); 
3.  
4. // 選擇ID爲」body_wrap「的元素下面的ID爲」special_anchor「的元素
5. $('body_wrap').getElement('#special_anchor'); 
6.  
7. // 選擇ID爲」body_wrap「的元素下面第一個CSS類名爲」special_anchor_class「的元素
8. $('body_wrap').getElement('.special_anchor_class');

參考代碼：  [複製代碼]  [保存代碼]

1. "body_wrap">
2.         "#">anchor
3.         "#">another anchor
4.         "special_anchor" href="#">special anchor
5.         "special_anchor_class" href="#">special anchor
6.         "special_anchor_class" href="#">another special anchor

$$();

$$函數能夠可讓你快速選擇多個元素，並組成一個數組（一種你能夠操做、獲取和以任何方式從新排序的列表）。你能夠經過標籤名（如div、a、img等）、或者ID或者是他們的各類組合來選擇多個元素。就像一個讀者指出的那樣，你能夠用$$作不少事情，遠遠超出咱們這裏所介紹的。

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇這個頁面中的全部div
2. $$('div'); 
3.  
4. // 選擇ID爲」id_name的元素和全部的div
5. $$('#id_name', 'div');

參考代碼：  [複製代碼]  [保存代碼]

2.     
   a div
3.     "id_name">a span

.getElements();

.getElements();和.getElement();很是相似，不過它返回全部符合要求的元素，並組成一個數組。你能夠想使用.getElement();方法那樣使用.getElements();。

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇ID爲」body_wrap「的元素下面的全部連接
2. $('body_wrap').getElements('a'); 
3.  
4. // 選擇ID爲」body_wrap「的元素下面的全部CSS類名爲」special_anchor_class「的子元素
5. $('body_wrap').getElements('.special_anchor_class');

參考代碼：  [複製代碼]  [保存代碼]

1. "body_wrap">
2.         "#">anchor
3.         "#">another anchor
4.         "special_anchor_class" href="#">special anchor
5.         "special_anchor_class" href="#">another special anchor

用運算符包含和排除結果

運算符

MooTools 1.2支持幾種運算符，可讓你進一步精簡你的選擇操做。你能夠在.getElements();中使用這些運算符來包含或者排除特定的結果。MooTools支持4種運算符，每一種均可以用來經過名字（name）選擇一個input元素。

• = : 等於

參考代碼：  [複製代碼]  [保存代碼]

1. //選擇name爲」phone_number「的input元素
2. $('body_wrap').getElements('input[name=phone_number]');

 

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇name以」phone「開頭的input元素
2. $('body_wrap').getElements('input[name^=phone]');

• $= : 以……結束

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇name以數字（number）結束的input元素
2. $('body_wrap').getElements('input[name$=number]');

• != : 不等於

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇名字不等於」address「的input元素
2. $('body_wrap').getElements('input[name!=address]');

參考代碼：  [複製代碼]  [保存代碼]

1. "body_wrap">
2.     "address" type="text" />
3.     "phone_number" type="text" /> 

（Fdream注：input在這裏只是做爲一個例子，你一樣可使用這種方式選擇其餘元素，好比div、a等等。）

要使用運算符，你必須首先指定元素的類型（好比這裏的input），而後指定你要過濾的屬性（好比這裏的name），再加上你的 運算符，最後選擇你的過濾字符串。

基於元素順序的選擇器

even（偶數選擇）

經過這個簡單的選擇器，你能夠選擇序號爲偶數的元素。注意：這個選擇器從0開始計數，所以第一個元素是偶數序的。

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇序號爲偶數的div
2. $$('div:even');

參考代碼：  [複製代碼]  [保存代碼]

1. Even
2. Odd
3. Even
4. Odd

odd（奇數選擇）

和even同樣，只不過它選擇序號爲奇數的元素。

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇全部序號爲奇數的div
2. $$('div:odd');

參考代碼：  [複製代碼]  [保存代碼]

1. Even
2. Odd
3. Even
4. Odd

.getParent();

經過.getParent();方法，你能夠獲得一個元素的父元素（parent）。

參考代碼：  [複製代碼]  [保存代碼]

1. // 選擇ID爲」child_id「的元素的父元素
2. $('child_id').getParent();

參考代碼：  [複製代碼]  [保存代碼]

1. "parent_id"> 
2.     "child_id">Even

代碼舉例

任何MooTools UI開發都是從選擇器開始的。這裏是一些很是簡單的例子，演示了怎麼去使用選擇器操做DOM元素。

參考代碼：  [複製代碼]  [保存代碼]
1. // 設置全部span的背景顏色爲#eee
2. $$('span').setStyle('background-color', '#eee');
3. // 設置全部序號爲奇數的span的背景色爲#eee
4. $$('span:odd').setStyle('background-color', '#eee'); 
5.  
6. // 設置ID爲body_wrap的元素下的全部CSS類名爲.middle_spans的span的背景色爲#eee
7. $('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');
參考代碼：  [複製代碼]  [保存代碼]
1. "body_wrap">
2.     Even
3.     "middle_spans">Odd
4.     "middle_spans">Even
5.     Odd

下載zip包並嘗試一下

這個zip包中包含了一個簡單的html文件、MooTools 1.2核心庫、一個外部js文件和上面你所看到的例子。

更多學習……

這並不意味着這是MooTools 1.2的選擇器的所有功能列表，這僅僅只是幫助你入門，告訴你MooTools給你提供了什麼功能。要學習有關選擇器的更多東西，請參考下面的文檔：

• 這裏有很是多的有關元素（Element）選擇器的文檔
• 順便也能夠看一下選擇器（Selectors）

MooTools Blog上有關$$選擇器的文章

這是mootools.net上很是好的一篇有關$$選擇器和介紹它的變化無窮的blog文章。經過這個選擇器你能夠作多到你沒法相信的事情，這篇文章很值得一讀。

Slickspeed選擇器

這裏有別人針對MooTools作的一個實驗，測量不一樣的庫在選擇元素時到底有多快。這對於它自己來講很cool，不過這些選擇器的例子很是有價值。這裏全部的選擇器特性均可以經過$$方法實現。

W3C選擇器

MooTools也可讓你利用僞選擇器的力量（就像上面的Slickspeed所證實的）。這裏是W3C的一篇關於選擇器的文章，必定值得讀一遍（若是隻有選擇器的列表對你有用的話）。我不肯定MooTools的$$選擇器是否是支持這個頁面上的每個單獨選擇器，可是至少是絕大部分。歡迎你們告訴我有關這方面的更多消息。