30天學會 MooTools 教學(2): DOM選擇器
如果你還沒有準備好,請先閱讀上一篇《Mootools 1.2教程(1)——MooTools介紹》。我們講了怎麼引用MooTools 1.2以及怎麼在domready裡面調用你的腳本。
今天開始本系列教程的第2講。在這一講中,我們會學習幾種選擇HTML元素的方法。在許多方面,這是MooTools用得最多最基本的。畢竟,要創建一個基於HTML元素的交互性用戶體驗,你必須首先把它們掌握在手中。
基本的方法
$();
$函數是MooTools中基本的選擇器。你可以通過它來根據一個ID選擇DOM元素。
// 選擇ID為」body_wrap「的元素
$('body_wrap');
<div id="body_wrap">
</div>
.getElement();
.getElement();擴展了$方法,可以讓你簡化你的選擇操作。例如,你可以通過$方法來選擇ID為」body_wrap「的元素,然後選 擇第一個子節點。.getElement();只選擇一個元素,如果有多個符合要求的元素則返回第一個元素。如果你給.getElement();方法一 個CSS類名作為參數,你就會得到第一個有這個CSS類名的元素,而不是函數所有元素的數組。要選擇多個元素,則可以使用下面 的.getElements();方法。
// 選擇ID為」body_wrap「的元素下面的第一個鏈接
$('body_wrap').getElement('a');
// 選擇ID為」body_wrap「的元素下面的ID為」special_anchor「的元素
$('body_wrap').getElement('#special_anchor');
// 選擇ID為」body_wrap「的元素下面第一個CSS類名為」special_anchor_class「的元素
$('body_wrap').getElement('.special_anchor_class');
<div id="body_wrap">
<a href="/article/223-30-day-teaching-institute-mootools-2-dom-selector#">anchor</a>
<a href="/article/223-30-day-teaching-institute-mootools-2-dom-selector#">another anchor</a>
<a id="special_anchor" href="/article/223-30-day-teaching-institute-mootools-2-dom-selector#">special anchor</a>
<a class="special_anchor_class" href="/article/223-30-day-teaching-institute-mootools-2-dom-selector#">special anchor</a>
<a class="special_anchor_class" href="/article/223-30-day-teaching-institute-mootools-2-dom-selector#">another special anchor</a>
</div>
$$();
$$函數可以可以讓你快速選擇多個元素,並組成一個數組(一種你可以操作、獲取和以任何方式重新排序的列表)。你可以通過標籤名(如div、a、img等)、或者ID或者是他們的各種組合來選擇多個元素。就像一個讀者指出的那樣,你可以用$$做很多事情,遠遠超出我們這裡所介紹的。
// 選擇這個頁面中的所有div
$$('div');
// 選擇ID為」id_name的元素和所有的div
$$('#id_name', 'div');
<div>
<div>a div</div>
<span id="id_name">a span</span>
</div>
.getElements();
.getElements();和.getElement();非常類似,不過它返回所有符合要求的元素,並組成一個數組。你可以想使用.getElement();方法那樣使用.getElements();。
// 選擇ID為」body_wrap「的元素下面的所有鏈接
$('body_wrap').getElements('a');
// 選擇ID為」body_wrap「的元素下面的所有CSS類名為」special_anchor_class「的子元素
$('body_wrap').getElements('.special_anchor_class');
<div id="body_wrap">
<a href="/article/223-30-day-teaching-institute-mootools-2-dom-selector#">anchor</a>
<a href="/article/223-30-day-teaching-institute-mootools-2-dom-selector#">another anchor</a>
<a class="special_anchor_class" href="/article/223-30-day-teaching-institute-mootools-2-dom-selector#">special anchor</a>
<a class="special_anchor_class" href="/article/223-30-day-teaching-institute-mootools-2-dom-selector#">another special anchor</a>
</div>
用運算符包含和排除結果
運算符
MooTools 1.2支持幾種運算符,可以讓你進一步精簡你的選擇操作。你可以在.getElements();中使用這些運算符來包含或者排除特定的結果。MooTools支持4種運算符,每一種都可以用來通過名字(name)選擇一個input元素。
= : 等於
//選擇name為」phone_number「的input元素
$('body_wrap').getElements('input[name=phone_number]');
// 選擇name以」phone「開頭的input元素
$('body_wrap').getElements('input[name^=phone]');
$= : 以……結束
// 選擇name以數字(number)結束的input元素
$('body_wrap').getElements('input[name$=number]');
!= : 不等於
// 選擇名字不等於」address「的input元素
$('body_wrap').getElements('input[name!=address]');
<div id="body_wrap">
<input name="address" type="text" />
<input name="phone_number" type="text" /> <!-- 上面的所有示例代碼都將選中這個元素 -->
</div>
(Fdream註:input在這裡只是作為一個例子,你同樣可以使用這種方式選擇其他元素,比如div、a等等。)
要使用運算符,你必須首先指定元素的類型(比如這裡的input),然後指定你要過濾的屬性(比如這裡的name),再加上你的 運算符,最後選擇你的過濾字符串。
基於元素順序的選擇器
even(偶數選擇)
通過這個簡單的選擇器,你可以選擇序號為偶數的元素。注意:這個選擇器從0開始計數,因此第一個元素是偶數序的。
// 選擇序號為偶數的div
$$('div:even');
<div>Even</div><!-- 上面的代碼將選中這個元素 -->
<div>Odd</div>
<div>Even</div><!-- 上面的代碼將選中這個元素 -->
<div>Odd</div>
odd(奇數選擇)
和even一樣,只不過它選擇序號為奇數的元素。
// 選擇所有序號為奇數的div
$$('div:odd');
<div>Even</div>
<div>Odd</div><!-- 上面的代碼將選中這個元素 -->
<div>Even</div>
<div>Odd</div><!-- 上面的代碼將選中這個元素 -->
.getParent();
通過.getParent();方法,你可以得到一個元素的父元素(parent)。
// 選擇ID為」child_id「的元素的父元素
$('child_id').getParent();
<div id="parent_id"> <!-- 上面的腳本將返回這個元素-->
<div id="child_id">Even</div>
</div>
代碼舉例
任何MooTools UI開發都是從選擇器開始的。這裡是一些非常簡單的例子,演示了怎麼去使用選擇器操作DOM元素。
// 設置所有span的背景顏色為#eee
$$('span').setStyle('background-color', '#eee');
// 設置所有序號為奇數的span的背景色為#eee
$$('span:odd').setStyle('background-color', '#eee');
// 設置ID為body_wrap的元素下的所有CSS類名為.middle_spans的span的背景色為#eee
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');
<div id="body_wrap">
<span>Even</span>
<span class="middle_spans">Odd</span>
<span class="middle_spans">Even</span>
<span>Odd</span>
</div>
下載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的$$選擇器是不是支持這個頁面上的每一個單獨選擇器,但是至少是絕大部分。歡迎大家告訴我有關這方面的更多消息。
Mootools 教學列表:
- 30天學會 MooTools 教學(1): 認識MooTools
- 30天學會 MooTools 教學(2): DOM選擇器
- 30天學會 MooTools 教學(3): 數組管理DOM元素
- 30天學會 MooTools 教學(4): 函數和MooTools
- 30天學會 MooTools 教學(5): 事件處理
- 30天學會 MooTools 教學(6): 操縱HTML DOM元素
- 30天學會 MooTools 教學(7): 設置和獲取樣式表屬性
- 30天學會 MooTools 教學(8): 輸入過濾-數字
- 30天學會 MooTools 教學(9): 輸入過濾-字符串
- 30天學會 MooTools 教學(10): Fx.Tween漸變
- 30天學會 MooTools 教學(11): Fx.Morph、Fx選項和Fx事件
- 30天學會 MooTools 教學(12): Drag.Move來實現拖放
- 30天學會 MooTools 教學(13): 正規表示式
- 30天學會 MooTools 教學(14): 定時器和Hash對象
- 30天學會 MooTools 教學(15): 滾動條(Slider)
- 30天學會 MooTools 教學(16): 排序類和方法簡介
- 30天學會 MooTools 教學(17): 手風琴(Accordion)教程
- 30天學會 MooTools 教學(18): Class 類(第一部分)
- 30天學會 MooTools 教學(19): 工具提示 Tooltips
- 30天學會 MooTools 教學(20): Tab 標籤頁
- 30天學會 MooTools 教學(21): Class 類(第二部分)
- 30天學會 MooTools 教學(22): 通過Fx.Elements同時處理多個形變動畫
- 30天學會 MooTools 教學(23): 滑動效果(Slide)
- 超過 50 個國外 Mootools 教學大集合