MooTools课程(2):DOM选择器
MooTools教程(2):DOM选择器如果你还没有准备好，请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们
MooTools教程(2):DOM选择器
如果你还没有准备好，请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。
今天开始本系列教程的第2讲。在这一讲中，我们会学习几种选择HTML元素的方法。在许多方面，这是MooTools用得最多最基本的。毕竟，要创建一个基于HTML元素的交互性用户体验，你必须首先把它们掌握在手中。
基本的方法
$();
$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。
参考代码：? [复制代码]? [保存代码]
//?选择ID为”body_wrap“的元素 - $('body_wrap');
参考代码：? [复制代码]? [保存代码]
"body_wrap">
.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');
参考代码：? [复制代码]? [保存代码]
"body_wrap"> - ????????"#">anchor ????????"#">another?anchor
- ????????"special_anchor"?href="#">special?anchor ????????"special_anchor_class"?href="#">special?anchor
- ????????"special_anchor_class"?href="#">another?special?anchor
$$();
$$函数可以可以让你快速选择多个元素，并组成一个数组（一种你可以操作、获取和以任何方式重新排序的列表）。你可以通过标签名（如div、a、img等）、或者ID或者是他们的各种组合来选择多个元素。就像一个读者指出的那样，你可以用$$做很多事情，远远超出我们这里所介绍的。
参考代码：? [复制代码]? [保存代码]
//?选择这个页面中的所有div - $$('div');? ?
- //?选择ID为”id_name的元素和所有的div $$('#id_name',?'div');
参考代码：? [复制代码]? [保存代码]
- ???? a?div ????"id_name">a?span
.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');
参考代码：? [复制代码]? [保存代码]
"body_wrap"> - ????????"#">anchor ????????"#">another?anchor
- ????????"special_anchor_class"?href="#">special?anchor ????????"special_anchor_class"?href="#">another?special?anchor
用运算符包含和排除结果
运算符
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]');
参考代码：? [复制代码]? [保存代码]
"body_wrap"> - ????"address"?type="text"?/> ????"phone_number"?type="text"?/>?
（Fdream注：input在这里只是作为一个例子，你同样可以使用这种方式选择其他元素，比如div、a等等。）
要使用运算符，你必须首先指定元素的类型（比如这里的input），然后指定你要过滤的属性（比如这里的name），再加上你的 运算符，最后选择你的过滤字符串。
基于元素顺序的选择器
even（偶数选择）
通过这个简单的选择器，你可以选择序号为偶数的元素。注意：这个选择器从0开始计数，因此第一个元素是偶数序的。
参考代码：? [复制代码]? [保存代码]
//?选择序号为偶数的div - $$('div:even');
参考代码：? [复制代码]? [保存代码]
Even - Odd Even
- Odd
odd（奇数选择）
和even一样，只不过它选择序号为奇数的元素。
参考代码：? [复制代码]? [保存代码]
//?选择所有序号为奇数的div - $$('div:odd');
参考代码：? [复制代码]? [保存代码]
Even - Odd Even
- Odd
.getParent();
通过.getParent();方法，你可以得到一个元素的父元素（parent）。
参考代码：? [复制代码]? [保存代码]
//?选择ID为”child_id“的元素的父元素 - $('child_id').getParent();
参考代码：? [复制代码]? [保存代码]
"parent_id">? - ????"child_id">Even
代码举例
任何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');
参考代码：? [复制代码]? [保存代码]
"body_wrap"> - ????Even ????"middle_spans">Odd
- ????"middle_spans">Even ????Odd
