|
|
今天開始本系列教程的第2講。在這一講中，我們會學(xué)習(xí)幾種選擇HTML元素的方法。在許多方面，這是MooTools用得最多最基本的。畢竟，要創(chuàng)建一個基于HTML元素的交互性用戶體驗，你必須首先把它們掌握在手中。
基本的方法
$();
$函數(shù)是MooTools中基本的選擇器。你可以通過它來根據(jù)一個ID選擇DOM元素。
參考代碼：
復(fù)制代碼 代碼如下:
// 選擇ID為”body_wrap“的元素
$('body_wrap');
參考代碼：
復(fù)制代碼 代碼如下:
<div id="body_wrap">
</div>
.getElement();
.getElement();擴(kuò)展了$方法，可以讓你簡化你的選擇操作。例如，你可以通過$方法來選擇ID為”body_wrap“的元素，然后選擇第一個子節(jié)點。.getElement();只選擇一個元素，如果有多個符合要求的元素則返回第一個元素。如果你給.getElement();方法一個CSS類名作為參數(shù)，你就會得到第一個有這個CSS類名的元素，而不是函數(shù)所有元素的數(shù)組。要選擇多個元素，則可以使用下面的.getElements();方法。
參考代碼：
復(fù)制代碼 代碼如下:
// 選擇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');
參考代碼：
復(fù)制代碼 代碼如下:
<div id="body_wrap">
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a id="special_anchor" href="#">special anchor</a>
<a class="special_anchor_class" href="#">special anchor</a>
<a class="special_anchor_class" href="#">another special anchor</a>
</div>
$$();
$$函數(shù)可以可以讓你快速選擇多個元素，并組成一個數(shù)組（一種你可以操作、獲取和以任何方式重新排序的列表）。你可以通過標(biāo)簽名（如div、a、img等）、或者ID或者是他們的各種組合來選擇多個元素。就像一個讀者指出的那樣，你可以用$$做很多事情，遠(yuǎn)遠(yuǎn)超出我們這里所介紹的。
參考代碼：
復(fù)制代碼 代碼如下:
// 選擇這個頁面中的所有div
$$('div');
// 選擇ID為”id_name的元素和所有的div
$$('#id_name', 'div');
參考代碼：
復(fù)制代碼 代碼如下:
<div>
<div>a div</div>
<span id="id_name">a span</span>
</div>
.getElements();
.getElements();和.getElement();非常類似，不過它返回所有符合要求的元素，并組成一個數(shù)組。你可以想使用.getElement();方法那樣使用.getElements();。
參考代碼：
復(fù)制代碼 代碼如下:
// 選擇ID為”body_wrap“的元素下面的所有鏈接
$('body_wrap').getElements('a');
// 選擇ID為”body_wrap“的元素下面的所有CSS類名為”special_anchor_class“的子元素
$('body_wrap').getElements('.special_anchor_class');
參考代碼：
復(fù)制代碼 代碼如下:
<div id="body_wrap">
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a class="special_anchor_class" href="#">special anchor</a>
<a class="special_anchor_class" href="#">another special anchor</a>
</div>
用運算符包含和排除結(jié)果
運算符
MooTools 1.2支持幾種運算符，可以讓你進(jìn)一步精簡你的選擇操作。你可以在.getElements();中使用這些運算符來包含或者排除特定的結(jié)果。MooTools支持4種運算符，每一種都可以用來通過名字（name）選擇一個input元素。
= : 等于
參考代碼：
//選擇name為”phone_number“的input元素
$('body_wrap').getElements('input[name=phone_number]');
^= : 以……開始
參考代碼：
// 選擇name以”phone“開頭的input元素
$('body_wrap').getElements('input[name^=phone]');
$= : 以……結(jié)束
參考代碼：
// 選擇name以數(shù)字（number）結(jié)束的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（偶數(shù)選擇）
通過這個簡單的選擇器，你可以選擇序號為偶數(shù)的元素。注意：這個選擇器從0開始計數(shù)，因此第一個元素是偶數(shù)序的。
參考代碼：
// 選擇序號為偶數(shù)的div
$$('div:even');
參考代碼：
<div>Even</div><!-- 上面的代碼將選中這個元素 -->
<div>Odd</div>
<div>Even</div><!-- 上面的代碼將選中這個元素 -->
<div>Odd</div>
odd（奇數(shù)選擇）
和even一樣，只不過它選擇序號為奇數(shù)的元素。
參考代碼：
// 選擇所有序號為奇數(shù)的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開發(fā)都是從選擇器開始的。這里是一些非常簡單的例子，演示了怎么去使用選擇器操作DOM元素。
參考代碼：
// 設(shè)置所有span的背景顏色為#eee
$$('span').setStyle('background-color', '#eee');
// 設(shè)置所有序號為奇數(shù)的span的背景色為#eee
$$('span:odd').setStyle('background-color', '#eee');
// 設(shè)置ID為body_wrap的元素下的所有CSS類名為.middle_spans的span的背景色為#eee
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');
參考代碼：
復(fù)制代碼 代碼如下:
<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文件和上面你所看到的例子。
更多學(xué)習(xí)……
這并不意味著這是MooTools 1.2的選擇器的全部功能列表，這僅僅只是幫助你入門，告訴你MooTools給你提供了什么功能。要學(xué)習(xí)有關(guān)選擇器的更多東西，請參考下面的文檔：
- 這里有非常多的有關(guān)元素（Element）選擇器的文檔
- 順便也可以看一下選擇器（Selectors）
MooTools Blog上有關(guān)$$選擇器的文章
這是mootools.NET上非常好的一篇有關(guān)$$選擇器和介紹它的變化多端的blog文章。通過這個選擇器你可以做多到你無法相信的事情，這篇文章很值得一讀。
Slickspeed選擇器
這里有別人針對MooTools做的一個實驗，測量不同的庫在選擇元素時到底有多快。這對于它本身來說很cool，不過這些選擇器的例子非常有價值。這里所有的選擇器特性都可以通過$$方法實現(xiàn)。
W3C選擇器
MooTools也可以讓你利用偽選擇器的力量（就像上面的Slickspeed所證明的）。這里是W3C的一篇關(guān)于選擇器的文章，一定值得讀一遍（如果只有選擇器的列表對你有用的話）。我不確定MooTools的$$選擇器是不是支持這個頁面上的每一個單獨選擇器，但是至少是絕大部分。歡迎大家告訴我有關(guān)這方面的更多消息。
JavaScript技術(shù)：Mootools 1.2教程(2) DOM選擇器，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
