现在的位置: 首页 > 综合 > 正文

mootools学习摘要

2012年08月08日 ⁄ 综合 ⁄ 共 2744字 ⁄ 字号 评论关闭

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();。

  1. // 选择ID为”body_wrap“的元素下面的所有链接
  2. $ ( 'body_wrap' ). getElements ( 'a' );  
  3. // 选择ID为”body_wrap“的元素下面的所有CSS类名为”special_anchor_class“的子元素
  4. $ ( 'body_wrap' ). getElements ( '.special_anchor_class' );
  1. <div   id = "body_wrap" >
  2.          <a   href = "#" > anchor </a>
  3.          <a   href = "#" > another anchor </a>
  4.          <a   class = "special_anchor_class"   href = "#" > special anchor </a>
  5.          <a   class = "special_anchor_class"   href = "#" > another special anchor </a>
  6. </div>

用运算符包含和排除结果

运算符

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

  • = : 等于
  1. //选择name为”phone_number“的input元素
  2. $ ( 'body_wrap' ). getElements ( 'input[name=phone_number]' );
  1. // 选择name以”phone“开头的input元素
  2. $ ( 'body_wrap' ). getElements ( 'input[name^=phone]' );
  • $= : 以……结束
  1. // 选择name以数字(number)结束的input元素
  2. $ ( 'body_wrap' ). getElements ( 'input[name$=number]' );
  • != : 不等于
  1. // 选择名字不等于”address“的input元素
  2. $ ( 'body_wrap' ). getElements ( 'input[name!=address]' );
  1. <div   id = "body_wrap" >
  2.      <input   name = "address"   type = "text"   />
  3.      <input   name = "phone_number"   type = "text"   />   <!-- 上面的所有示例代码都将选中这个元素 -->
  4. </div>




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

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

基于元素顺序的选择器

even(偶数选择)

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

  1. // 选择序号为偶数的div
  2. $$ ( 'div:even' );
  1. <div> Even </div> <!-- 上面的代码将选中这个元素 -->
  2. <div> Odd </div>
  3. <div> Even </div> <!-- 上面的代码将选中这个元素 -->
  4. <div> Odd </div>

odd(奇数选择)

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

  1. // 选择所有序号为奇数的div
  2. $$ ( 'div:odd' );
  1. <div> Even </div>
  2. <div> Odd </div> <!-- 上面的代码将选中这个元素 -->
  3. <div> Even </div>
  4. <div> Odd </div> <!-- 上面的代码将选中这个元素 -->


复制一个数组

$A



MooTools提供了一个简单的方式——通过$A函数来复制一个数组。让我们像刚才那样使用变量创建一个数组:

  1. // 创建你的数组变量
  2. var   myArray  =   $ ( 'body_wrap' ). getElements ( 'div' );

复制一个数组(创建该数组的副本):

  1. // 建立一个新的变量名,命名为”myCopy“,然后把”myArray“的副本赋值给它
  2. var   myCopy  =   $A ( myArray  );


 

基本方法

.get();

这个工具可以让你获取元素的属性(property)。元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单:

  1. // 下面这行将返回id为“id_name”的元素的html标记名(div、a、span……)
  2. $ ( 'id_name' ). get ( 'tag' );
  1. <div   id = "body_wrap" >
  2.      <span   id = "id_name" > Element </span>   <!-- 上面的代码将返回“span” -->
  3. </div>

你可以使用.get();方法获得更多属性,而不只是html标记名:

  • id
  • name
  • value
  • href
  • s

抱歉!评论已关闭.