mootools学习摘要

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 （一个元素的文本内容）
• 等等…