如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。 今天开始本系列教程的第2讲。在这一讲中,我们会学习几种选择HTML元素的方法。在许多方面,这是MooTools用得最多最基本的。毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中。 基本的方法 $(); $函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。 参考代码:
// 选择ID为”body_wrap“的元素 $('body_wrap');
参考代码:
<div id="body_wrap"> </div>
.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');
参考代码:
<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>
$$(); $$函数可以可以让你快速选择多个元素,并组成一个数组(一种你可以操作、获取和以任何方式重新排序的列表)。你可以通过标签名(如div、a、img等)、或者ID或者是他们的各种组合来选择多个元素。就像一个读者指出的那样,你可以用$$做很多事情,远远超出我们这里所介绍的。 参考代码:
// 选择这个页面中的所有div $$('div'); // 选择ID为”id_name的元素和所有的div $$('#id_name', 'div');
参考代码:
<div> <div>a div</div> <span id="id_name">a span</span> </div>
.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');
参考代码:
<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>
用运算符包含和排除结果 运算符 MooTools 1.2支持几种运算符,可以让你进一步精简你的选择操作。你可以在.getElements();中使用这些运算符来包含或者排除特定的结果。MooTools支持4种运算符,每一种都可以用来通过名字(name)选择一个input元素。 = : 等于 参考代码: |