Mootools 1.2教程(2)——DOM选择器（4）

代码举例

任何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包并尝试一下  （26.95 KB）

本站下载：mootorial_day2.zip （26.95 KB）

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