Class(类)
一个JavaScript类(相对于CSS的类),是一个功能可以重复使用的对象。若要更多地了解MooTools类,你可以看看Valerio的这篇简单介绍的文章(MooTools类——怎样使用它们 )。我也同时推荐David Walsh的MooTools类模板 。
Utilities(实用工具)
实用工具(Utilities)提供了更多精良的选择逻辑,包括domready事件、可以管理AJAX调用的工具、可以轻松管理cookie的工具,甚至还有”swiff“功能,可以提供JavaScript接口给ActionScript。
FX(效果)
这可能是MooTools最有趣的部分了。通过Fx(效果),你可以创建”Tween“(补间动画)和”morph“(形变动画)效果,从而让你的DOM对象动起来。
- 在两个样式属性值之间创建一个动画变形(比如让一个div平缓地变大) – var myFx = new Fx.Tween(element);
- 在多个不同的属性值之间创建一个动画变形(比如在让一个div平缓变大的过程中,让它的边框越来越初,同时变换它的背景颜色) – var myFx = new Fx.Morph(element);
Request(请求)
包含一些可以轻松处理JavaScript XMLHttpRequest(AJAX)功能的工具。为了减轻整个请求/响应(request/response)带来的痛苦,Request对象还有一些专门用来处理HTML和JSON对象(JavaScript对象表示法) 的扩展。
.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元素。
- = : 等于
- //选择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]'
);
- <div
id
=
"body_wrap"
>
-
<input
name
=
"address"
type
=
"text"
/>
-
<input
name
=
"phone_number"
type
=
"text"
/>
<!-- 上面的所有示例代码都将选中这个元素 -->
- </div>
(Fdream注:input在这里只是作为一个例子,你同样可以使用这种方式选择其他元素,比如div、a等等 。)
要使用运算符,你必须首先指定元素的类型(比如这里的input),然后指定你要过滤的属性(比如这里的name),再加上你的 运算符,最后选择你的过滤字符串。
基于元素顺序的选择器
even(偶数选择)
通过这个简单的选择器,你可以选择序号为偶数的元素。注意: 这个选择器从0开始计数,因此第一个元素是偶数序的。
- // 选择序号为偶数的div
- $$ ( 'div:even' );
- <div>
Even
</div>
<!-- 上面的代码将选中这个元素 -->
- <div>
Odd
</div>
- <div>
Even
</div>
<!-- 上面的代码将选中这个元素 -->
- <div>
Odd
</div>
odd(奇数选择)
和even一样,只不过它选择序号为奇数的元素。
- // 选择所有序号为奇数的div
- $$ ( 'div:odd' );
- <div>
Even
</div>
- <div>
Odd
</div>
<!-- 上面的代码将选中这个元素 -->
- <div>
Even
</div>
- <div>
Odd
</div>
<!-- 上面的代码将选中这个元素 -->
复制一个数组
$A
MooTools提供了一个简单的方式——通过$A函数来复制一个数组。让我们像刚才那样使用变量创建一个数组:
- // 创建你的数组变量
- var
myArray
=
$
(
'body_wrap'
).
getElements
(
'div'
);
复制一个数组(创建该数组的副本):
- // 建立一个新的变量名,命名为”myCopy“,然后把”myArray“的副本赋值给它
- var
myCopy
=
$A
(
myArray
);
基本方法
.get();
这个工具可以让你获取元素的属性(property)。元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单:
- // 下面这行将返回id为“id_name”的元素的html标记名(div、a、span……)
- $
(
'id_name'
).
get
(
'tag'
);
- <div
id
=
"body_wrap"
>
-
<span
id
=
"id_name"
>
Element
</span>
<!-- 上面的代码将返回“span” -->
- </div>
你可以使用.get();方法获得更多属性,而不只是html标记名:
- id
- name
- value
- href
- src
- class(如果有多个CSS类名,则将返回全部CSS类名)
- text (一个元素的文本内容)
- 等等…