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的$$选择器是否是支持这个页面上的每个单独选择器，可是至少是绝大部分。欢迎你们告诉我有关这方面的更多消息。