什麼是MooTools選擇器
在《MooTools DOM
之 Accessing elements（訪問元素）》日誌中，以$$()爲代表，以及衆多對Element prototype擴展的方法，讓您更輕鬆的操作DOM元素。默認情況下，這些方法只允許以標籤名爲參數。
當你使用了Selectors，這些方法變得更爲強大。因爲Selectors.js 文件擴展其功能，以允許你可以使用CSS選擇器。
它不會改變你對原有方法的使用方式，您可以靈活的使用這些方法，它只會幫你更好的，更方便的，選擇你想要的DOM內容。
這裏有一個簡單的例子：
//Without Selectors.js, all you can select
//on are tag names.
//All the divs on the page:
$$('div');
//All the divs and paragraphs
//note: this returns an array with all the divs first,
//then all the paragraphs:
$$('div', 'p');
//When you include Selectors.js, you can
//pass in CSS selectors.
//All the divs with the css class 'myClass':
$$('div.myClass')
/All the paragraphs that are inside divs:
$$('div p');
//All the bold tags in paragraphs with
//Class 'foo' in divs with class 'myClass':
$$('div.myClass p.foo b');
此函數性適用於任何方法,接受作爲參數選擇。
除了$$（），以下元素的方法，同樣如此：
| 可以繼承Selectors的DOM方法 | |
| Element.getElement | Element.getAllNext |
| Element.getElements | Element.getFirst |
| Element.match | Element.getLast |
| Element.getPrevious | Element.getParent |
| Element.getAllPrevious | Element.getParents |
| Element.getNext | Element.getChildren |
通俗的講, Selector選擇器就是"一個表示特殊語意的字符串". 只要把選擇器字符串傳入上面的方法中就能夠選擇不同的Dom元素，如果取得指定的DOM元素,則返回該元素，返回值可以是一個元素對象，元素集合或元素數組等。
複雜的CSS3表達式
除了標準的CSS表達式，如在上一節的例子，Selectors.js還可以選擇元素屬性，如名稱，值，或 href 。請參考 標準CSS3表達式(見 http://www.w3.org/TR/css3-selectors/#attribute-representation) 。
下面的表達式是支持的：
| = | 匹配給定的屬性是某個特定值的元素 |
| ^= | 匹配給定的屬性是以某些值開始的元素 |
| $= | 匹配給定的屬性是以某些值結尾的元素 |
| != | 匹配給定的屬性是不包含某個特定值的元素 |
| *= | 匹配給定的屬性是以包含某些值的元素 |
| ~= |
該屬性的值必須是一系列用空格隔開的多個值，(比如，class=”title featured home”)，而且這些值中的一個必須是指定的值”value”。 |
| |= |
屬性的值就是“value”或者以“value”開始並立即跟上一個“-”字符，也就是“value-”。(比如lang=”zh-cn”) |
請看Example:
//All the inputs where name equals 'email'
$$('input[name=email]')
//All the images with urls that end in .gif:
$$('img[src$=gif]')
//All the links without target="_blank":
$$('a[target!=_blank]')
Note that these expressions can take double or single quotes when you
want to search for something that has a space or other character:
$$('input[name!="user[username]"]')
$$('img[src$=".gif"]')
MooTools Selectors 分類
在我們學習之前，如果你對Css Selectors不是很瞭解的話，我建議你學習一下，《征服，高級CSS選擇器》 。
基本選擇器
MooTools的基本選擇器，是我們常用的選擇器，也是最簡單的選擇器，它是通過id,class和標籤名等來查找DOM元素的。在網頁中，id名稱只能使用一次，class名稱允許重複使用。
| 選擇器 | 描述 | 示例 | 備註 |
| #id | 根據給定的id匹配一個元素 | $$(‘#myid’)選取文檔中id爲myid的一個元素 | |
| .class | 根據給定的類名匹配元素 | $$(‘.myclass’)選取文檔中所有class爲myclass的元素 | |
| element | 根據給定的標籤名匹配元素 | $$(‘p’)選取文檔中所有的<p>元素 | |
| * | 匹配所有元素 | $$(‘*’)選取所有的元素 | IE中$$(‘*’)有問題 |
|
Selector1, Selector2, …..,SelectorN |
將每一個選擇器匹配到的元素合併後一起返回 | $$(‘div’,’span’,'p.myclass’)選取所有<div>,<span>和class爲myclass的<p>標籤的一組元素 |
注意：$$()函數可以接受任意個數的參數, 參數類型如下: HTMLCollections, 元素數組, 多個單獨的元素, 或者CSS選擇器字符串.
在日常的使用中，基本選擇器可以滿足我們大多數的工作需要。
下面我們用具體的示例來測試一下：
演示: 基礎選擇器
層次選擇器
如果想通過DOM元素之間關係來獲取特定元素，例如後代元素，子元素，相鄰元素，兄弟元素等，那麼層次選擇器是一個非常好的選擇器。
| 選擇器 | 描述 | 示例 | 注意 |
|
後代選擇器 |
|||
| $$(‘ancestor descendant’) | 選取ancestor元素裏的所有descendant（後代）.元素即ancestor(祖先),descendant(子孫)。 | $$(‘body div’) 選取body裏的所有的div元素。 | 後代選擇器是基於一個元素是否是另一個元素的後代來決定是否應用樣式的 |
| 直接子選擇器 | |||
| $$(‘parent>child’) |
選取parent元素下的child(子)元素，與
(‘ancestordescendant′)是有區別的，
(‘ancestor descendant’)選擇的是後代元素。 |
$$(‘body > div’) 選取body裏元素是div的子元素。 | 選擇parent的直接子節點child. child必須包含在parent中並且父類是parent元素。 |
|
兄弟（相鄰）組合選擇器 |
|||
| $$(‘prev+next’) | 選取緊跟在prev元素後的下一個元素。 | $$(‘.one + div’) 選取class爲one的下一個 div 元素。 | prev和next是兩個同級別的元素. 選中在prev元素後面的next元素。 |
| 普通兄弟組合選擇器 | |||
| $$(‘prev~siblings’) | 選取prev元素之後的所有siblings元素。 |
$$(‘.two ~ div’)選擇 class爲two的元素後面的所有div兄弟元素。 $$(‘#someDiv~[title]’)選擇id爲someDiv的對象後面所有帶有title屬性的元素。 |
siblings是過濾器 |
下面我們用具體的示例來測試一下：
演示: 層次選擇器
過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS的僞類選擇器語法相同，即選擇器都以一個冒號（:）開頭。按照不同的過濾規則，過濾選擇器可以分爲基本過濾，可見性過濾，內容過濾，子元素過濾，表單對象屬性過濾選擇器。
| 選擇器 | 描述 | 示例 | 備註 |
| 基本過濾選擇器 | |||
| :index | 根據索引號查取元素 | 查找列表索引號是3的所有li ：$$(‘li:index(3)’) | 從 0 開始計數（自定義僞類選擇器） |
| :even | 匹配所有索引值爲偶數的元素 | 查找列表li的1、3、5…行:$$(‘li:even’) |
從 0 開始計數（自定義僞類選擇器） 強烈推薦使用本選擇器來替代nth-child(even), 因爲它返回的是實際的偶數序子元素. |
 dd |
匹配所有索引值爲奇數的元素 | 查找列表li的1、3、5…行:$$(‘li:odd’) |
從 0 開始計數（自定義僞類選擇器） 強烈推薦使用本選擇器來替代nth-child(odd), 因爲它返回的是實際的奇數序子元素. |
| 可見性過濾選擇器 | |||
| :enabled | 匹配所有可用元素 |
(‘∗:enabled′)
(‘myElement’).getElements(‘:enabled’); |
（自定義僞類選擇器） |
| 內容過濾選擇器 | |||
| :empty | 匹配所有內容爲空的元素 | $$(‘div:empty’); | |
| :contains(text) | 匹配含有文本內爲“text”的元素 | $$("p:contains(‘find me’)"); | |
| :not(selector) |
檢測當前元素是否符合指定的CSS規則.
|
# 除 .foobar 以外的所有 <div> 的背景爲黑色 $$(‘div:not(.foobar) ‘).setStyle(‘background’,'#000′); # 除 .foo 和 .bar 以外的所有 <h2> 的背景都爲 #ccc $$(‘h2:not(.foo, .bar) ‘).setStyle(‘background’,’#ccc‘); |
|
| 子元素過濾選擇器 | |||
|
:nth-child (expression) |
匹配其父元素下的第N個子或奇偶元素。
可以使用: 所有奇數序子元素: ‘:nth-child(odd)’ 所有偶數序子元素: ‘:nth-child(even)’ 無兄弟節點的子元素: ‘:nth-child(only)’ 第一個子元素: ‘nth-child(first)’ 最後一個子元素: ‘nth-child(last)’ |
在每個 ul 查找第 2 個li: $$(‘ul li:nth-child(2)’) |
:nth-child從1開始的。 |
| :first-child |
選取每個父元素的第一個子元素 |
在每個 ul 中查找第一個 li: $$(‘ul li:first-child’) |
|
| :last-child |
匹配最後一個子元素。 ‘:last’只匹配一個元素，而此選擇符將爲每個父元素匹配一個子元素 |
在每個 ul 中查找最後一個 li: $$(‘ul li:last-child’) |
|
| : only-child |
如果某個元素是父元素中唯一的子元素，那將會被匹配。 如果父元素中含有其他元素，那將不會被匹配。 |
在 ul 中查找是唯一子元素的 li: $$(‘ul li:only-child’) |
|
| 表單對象屬性過濾選擇器 | |||
| :selected | 匹配所有選中的option元素 |
查找所有選中的選項元素: $$(’select option:selected’) |
自定義僞類選擇器 |
| :checked | 匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option) |
查找所有選中的複選框元素: $$(‘input:checked’) |
|
下面我們用具體的示例來說明：
演示:表單對象屬性過濾選擇器
演示:內容過濾器選擇器
屬性過濾選擇器
| 名稱 | 描述 | 示例 |
| [attribute] | 匹配包含給定屬性的元素 |
查找所有含有 id 屬性的 div 元素: $$(‘div[id]‘) |
| [attribute=value] | 匹配給定的屬性是某個特定值的元素 |
查找所有 name 屬性是 newsletter 的 input 元素: $$(“input[name='newsletter']“).attr(‘checked’, true); |
| [attribute!=value] | 匹配給定的屬性是不包含某個特定值的元素 |
查找所有 name 屬性不是 newsletter 的 input 元素: $$(“input[name!='newsletter']“).attr(‘checked’, true); |
| [attribute^=value] | 匹配給定的屬性是以某些值開始的元素 | $$(“input[name^='news']“) |
| [attribute$=value] | 匹配給定的屬性是以某些值結尾的元素 |
查找所有 name 以 ‘letter’ 結尾的 input 元素: $$(“input[name$='letter']“) |
| [attribute*=value] |
匹配給定的屬性是以包含某些值的元素 |
查找所有 name 包含 ‘man’ 的 input 元素: |
| [attribute~=value] | 該屬性的值必須是一系列用空格隔開的多個值，(比如，class=”title featured home”)，而且這些值中的一個必須是指定的值”value”。 |
查找所有的a 元素，並且class屬性中含有tit的元素 $$(‘a[class~=tit]‘) |
| [attribute|=value] | 屬性的值就是“value”或者以“value”開始並立即跟上一個“-”字符，也就是“value-”。(比如lang=”zh-cn”) |
該語句將匹配所有class屬性包含”post”並帶”-”字符的div元素。 $$(“[class|='post'] “) |
|
[attributeFilter1] [attributeFilter2] [attributeFilterN] |
複合屬性選擇器，需要同時滿足多個條件時使用。 |
找到所有含有 id 屬性，並且它的 name 屬性是以 man 結尾的: $$("input[id][name$='man']") |