MooTools教程

当前位置:首页>Mootools>MooTools教程>30天学会 MooTools 教学(2): DOM选择器

30天学会 MooTools 教学(2): DOM选择器

时间:2015-07-09 07:36来源:网络整理 作者:KKWL 点击:
如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)MooTools介绍》。我们讲了怎麽引用MooTools 1.2以及怎麽在domready裡面调用你的脚本。 今天开始本系列教程的第2讲。在这一讲中,我

  如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎麽引用MooTools 1.2以及怎麽在domready裡面调用你的脚本。

  今天开始本系列教程的第2讲。在这一讲中,我们会学习几种选择HTML元素的方法。在许多方面,这是MooTools用得最多最基本的。毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中。

 
基本的方法

$();

$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。

$('body_wrap');

<div>
</div>

 

.getElement();

.getElement();扩展了$方法,可以让你简化你的选择操作。例如,你可以通过$方法来选择ID为」body_wrap「的元素,然后选 择第一个子节点。.getElement();只选择一个元素,如果有多个符合要求的元素则返回第一个元素。如果你给.getElement();方法一 个CSS类名作为参数,你就会得到第一个有这个CSS类名的元素,而不是函数所有元素的数组。要选择多个元素,则可以使用下面 的.getElements();方法。

$('body_wrap').getElement('a');

$('body_wrap').getElement('#special_anchor');

$('body_wrap').getElement('.special_anchor_class');


<div>
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a href="#">special anchor</a>
<a href="#">special anchor</a>
<a href="#">another special anchor</a>
</div>



$$();

$$函数可以可以让你快速选择多个元素,并组成一个数组(一种你可以操作、获取和以任何方式重新排序的列表)。你可以通过标籤名(如div、a、img等)、或者ID或者是他们的各种组合来选择多个元素。就像一个读者指出的那样,你可以用$$做很多事情,远远超出我们这裡所介绍的。

$$('div');

$$('#id_name', 'div');

<div>
<div>a div</div>
<span>a span</span>
</div>



.getElements();

.getElements();和.getElement();非常类似,不过它返回所有符合要求的元素,并组成一个数组。你可以想使用.getElement();方法那样使用.getElements();。

$('body_wrap').getElements('a');

$('body_wrap').getElements('.special_anchor_class');


<div>
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a href="#">special anchor</a>
<a href="#">another special anchor</a>
</div>



用运算符包含和排除结果

运算符

MooTools 1.2支持几种运算符,可以让你进一步精简你的选择操作。你可以在.getElements();中使用这些运算符来包含或者排除特定的结果。MooTools支持4种运算符,每一种都可以用来通过名字(name)选择一个input元素。
= : 等于

$('body_wrap').getElements('input[name=phone_number]');


$('body_wrap').getElements('input[name^=phone]');

 

$= : 以……结束

$('body_wrap').getElements('input[name$=number]');

 

!= : 不等于

$('body_wrap').getElements('input[name!=address]');


<div>
<input type="text" />
<input type="text" /> <!-- 上面的所有示例代码都将选中这个元素 -->
</div>

 

(Fdream注:input在这裡只是作为一个例子,你同样可以使用这种方式选择其他元素,比如div、a等等。)

要使用运算符,你必须首先指定元素的类型(比如这裡的input),然后指定你要过滤的属性(比如这裡的name),再加上你的 运算符,最后选择你的过滤字符串。

基于元素顺序的选择器

even(偶数选择)

通过这个简单的选择器,你可以选择序号为偶数的元素。注意:这个选择器从0开始计数,因此第一个元素是偶数序的。

$$('div:even');


<div>Even</div><!-- 上面的代码将选中这个元素 -->
<div>Odd</div>
<div>Even</div><!-- 上面的代码将选中这个元素 -->
<div>Odd</div>

 

odd(奇数选择)

和even一样,只不过它选择序号为奇数的元素。

$$('div:odd');



<div>Even</div>
<div>Odd</div><!-- 上面的代码将选中这个元素 -->
<div>Even</div>

<div>Odd</div><!-- 上面的代码将选中这个元素 -->

 

.getParent();

通过.getParent();方法,你可以得到一个元素的父元素(parent)。

$('child_id').getParent();



<div> <!-- 上面的脚本将返回这个元素-->
<div>Even</div>
</div>

------分隔线----------------------------