MooTools - 快速指南

MooTools - 简介

MooTools 是一个面向对象的轻量级 JavaScript 框架。MooTools 的完整形式是“我的面向对象工具”。它是在免费、开源的 MIT 许可证下发布的。它是最流行的 JavaScript 库之一。

MooTools 是一个功能强大、轻量级的 JavaScript 库。它在 Web 开发中创建了 JavaScript 的简单交互。作为 CSS 扩展，它还可以做很多事情。MooTools 具有各种漂亮的扩展，使您能够创建动画效果。

MooTools 的组件

MooTools 包含许多组件。以下是不同的组件类别 -

核心- 所有其他组件所需的实用函数的集合。
更多- 扩展核心并提供增强功能的官方附加组件集合。
类- 类对象实例化的基础库。
Natives - JavaScript 本机对象增强功能的集合。本机添加了功能、兼容性和简化编码的新方法。
元素- 包含对 HTML 元素对象的大量增强和兼容性标准化。
FX - 一种高级效果 API，有助于为页面元素添加动画效果。
请求- 包括 XHR 接口、Cookie JSON 和 HTML 检索特定工具，供开发人员利用。
窗口- 为客户端特定信息（例如窗口的尺寸）提供跨浏览器界面。

MooTools – 优点

与原生 JavaScript 相比，MooTools 具有许多优势。这些优点包括以下内容 -

MooTools 是一个广泛的模块化框架，允许开发人员创建自己的自定义组件组合。
MooTools 遵循面向对象范例和 DRY 原则（不要重复自己）。
MooTools 提供高级组件效果和优化的过渡。它主要用于 Flash 开发人员。
MooTools 为 DOM 提供了不同的增强功能。这有助于开发人员添加、修改、选择和删除 DOM 元素。并且，它还支持存储和检索元素存储。

MooTools - 安装

MooTools 是一个功能强大的 JavaScript 库，用于使用面向对象范例设计 DOM 对象。本章介绍如何安装和使用 MooTools 库以及 JavaScript。

要安装 MooTools 库，请按照以下步骤操作 -

第 1 步：下载 MooTools Core 和 MooTools More 库

您可以从以下链接 MooTools-Core 和 MooTools -More下载最新版本的 MooTools Core和MooTools More 库。当您点击链接时，您将被引导至浏览器中的以下屏幕 -

和，

单击下载按钮，您将获得最新版本的 MooTools 库。在本教程中，我们使用MooTools-Core-1.6.0.js和MooTools-More-1.6.0.js库。

步骤 2：将 MooTools Core 和更多库上传到服务器

现在，您的文件系统中已经有了 MooTools 库。我们必须将这些库复制到应用程序网页可用的服务器（工作区）中。对于本教程，我们使用C:\MooTools\workspace\目录位置。

因此，将MooTools-Core-1.6.0.js和MooTools-More-1.6.0.js文件复制到给定的目录位置。

步骤 3：将 MooTools Core 和 More 库链接到脚本标签中

JavaScript 库是一个.js文件。如果您将此库包含到 JavaScript 代码中，请将其包含在脚本标记中，如下所示。看一下下面的代码片段。

<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

MooTools - 程序结构

MooTools是一个可用于设计面向对象模型的工具。让我们在本章中讨论 MooTools 库的一个简单示例。

例子

这里我们将使用 Class 设计一个名为 Rectangle 的模型。为此，我们需要声明属性——宽度和高度。

看一下下面的代码，并将其保存到sample.html中。

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javaScript">
         var Rectangle = new Class({
            //properties
            width: 0,
            height: 0,
            
            //methods
            initialize: function(widthVal, heightVal) {
               this.width = widthVal;
               this.height = heightVal;
            },
            details: function() {
               document.write("Welcome to MooTools demo program");
               document.write("Width: "+this.width+" Height: "+this.height);
            },
         });
         var rec = new Rectangle(5,4);
         rec.details();
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 -

输出

MooTools - 选择器

选择器用于选择 HTML 元素。每当您想要制作交互式网页时，您都需要从该网页中选择一些数据或操作。选择器帮助我们通过来自元素的 HTML 请求接收数据。

基本选择器($)

$是MooTools 中的基本选择器。使用它，您可以通过 ID 选择 DOM 元素。例如，假设您有一个名为body_id的 HTML 元素（例如 div）。

<div id = "body_id">

</div>

如果您想选择此 div，请使用以下语法 -

句法

//selects the element with the ID 'body_id'
$('body_id');

获取元素()

getElement() 是扩展基本选择器 ($) 的方法。它允许您使用元素 ID 细化您的选择。getElement() 仅选择单个元素，如果有多个选项，则返回第一个元素。您还可以使用类名来获取元素的第一次出现。但它不会获得元素数组。

多重选择器 ($$)

$$ 用于选择多个元素并将这些多个元素放入数组中。从该数组中，我们可以以不同的方式操作、检索和重新排序列表。看看下面的语法。它定义了如何从网页上的 HTML 元素集合中选择所有 div 元素。

句法

<div>
   <div>a div</div>
   <span id = "id_name">a span</span>
</div>

如果要选择所有 div，请使用以下语法 -

句法

//all divs in the page
$$('div');

如果要选择具有相同 id 名称的多个 div，请使用以下语法 -

句法

//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');

获取元素()

getElements() 方法与 getElement() 方法类似。此方法根据条件返回所有元素。您可以使用元素名称（a、div、input）来选择这些集合，也可以使用特定的元素类名称来选择同一类元素的集合。

使用运算符包含和排除结果

MooTools 支持不同的运算符来优化您的选择。您可以在 getElements() 方法中使用所有这些运算符。这些运算符中的每一个都可用于按名称选择输入元素。

看看下表。它定义了 MooTools 支持的不同运算符。

操作员	描述	例子
=（等于）	按名称选择输入元素。	$('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]');
*=（包含）	选择包含特定字母模式的输入元素。	$('body_wrap').getElements('input[name*=phone]');

基于元素顺序的选择器

MooTools 选择器在元素选择中遵循特定的顺序。选择器主要遵循两个顺序；一个是偶数，另一个是奇数。

注意- 该选择器从 0 开始，因此第一个元素是偶数。

连单

按照这个顺序，选择器选择以偶数顺序放置的元素。使用以下语法选择 HTML 页面中的所有偶数 div。

句法

// selects all even divs
$$('div:even');

奇数订单

按照这个顺序，选择器选择以奇数顺序放置的元素。使用以下语法选择 HTML 页面中的所有奇数 div。

句法

// selects all odd divs
$$('div:odd');

例子

以下示例显示了选择器的工作原理。假设网页上有一个文本框和一个技术列表。如果您通过在文本框中输入名称来从列表中选择一种技术，则列表会根据您的输入显示筛选结果。使用 MooTools 选择器可以实现这一点。使用选择器，我们可以将事件添加到文本框。事件侦听器将从文本框中选取数据并从列表中检查它。如果它在列表中，则列表显示过滤后的结果。看看下面的代码。

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready',function(){
            var input = $('filter');
            
            // set the title attribute of every element
            // to it's text in lowercase
            $$('ul > li').each(function(item){
               item.set('title', item.get('text').toLowerCase());
            });
            
            // the function we'll call when the user types
            var filterList = function(){
               var value = input.value.toLowerCase();
               $$('li').setStyle('display','none');
               
               // check the title attribute if it contains whatever the user is typing
               $$('ul > li[title*=' + value + ']').setStyle('display','');
            };
            
            // make it happen
            input.addEvent('keyup', filterList);
         });
      </script>
   </head>
   
   <body>
      <p><input id = "filter" type = "text" /></p>
      <ul>
         <li>C</li>
         <li>Cpp</li>
         <li>Java</li>
         <li>JavaScript</li>
         <li>Hadoop</li>
         <li>Hive</li>
         <li>CouchDB</li>
      </ul>
   </body>
   
</html>

您将收到以下输出 -

输出

MooTools - 使用数组

MooTools 是一个轻量级的 JavaScript 库，有助于创建动态网页。在管理DOM元素时，我们需要选择网页的所有DOM元素。该集合可以使用数组来处理。

本章介绍如何使用数组来管理 DOM 元素。

每个()方法

这是处理数组的基本方法。它通过列表迭代所有元素。您可以根据需要使用此方法。例如，如果您想选择页面的所有 div 元素，请按照下面给出的脚本进行操作。看一下下面的 html 页面，其中包含多个 div。

<div>One</div>
<div>Two</div>

您可以使用以下脚本从页面上的 div 集合中选择每个单独的 div 。该脚本将选择每个 div 并传递警报。看看下面的脚本。

脚本

$$('div').each(function() {
   alert('a div');
});

您可以使用以下语法来处理上面给出的示例。看一下 HTML 页面。

脚本

<div id = "body_div">
   <div>One</div>
   <div>Two</div>
</div>

在这里，这两个 div 被另一个 div — body_div包围。在设计脚本时，我们只能选择一个外部 div。之后，通过使用 getElements() 方法，我们可以选择两个内部 div。看看下面的脚本。

脚本

$('body_wrap').getElements('div').each(function() {
   alert('a div');
});

您可以使用不同的方法来编写上述脚本，如下所示。在这里，我们使用一个单独的变量来选择body_div。

脚本

var myArray = $('body_div').getElements('div');
myArray.each(function() {
   alert('a div');
});

从数组中选择特定元素

在操作元素数组时，我们可以从元素数组中选择特定元素。以下是一些用于操作 DOM 元素的重要方法 -

获取最后一个()

此方法返回数组的最后一个元素。让我们设置一个数组来理解这个方法。

var myArray = $('body_div').getElements('div');

我们现在可以获取数组中的最后一个元素。

var lastElement = myArray.getLast();

变量lastElement现在表示myArray 中的最后一个元素。

获取随机数()

getRandom() 方法的工作方式与 getLast() 方法类似，但将从数组中获取随机元素。

句法

var randomElement = myArray.getRandom();

变量randomElement现在表示myArray中随机选择的元素。

数组的副本

MooTools 提供了一种使用 $A() 函数复制数组的方法。以下是 $A() 函数的语法。

句法

var <variable-name> = $A ( <array-variable>);

将元素添加到数组

有两种不同的方法可以将元素添加到数组中。第一种方法允许您逐个添加元素，或者可以将两个不同的数组合并为一个。

包括（）

include() 方法用于将项目添加到 DOM 元素数组中。例如，请考虑以下 HTML 代码，其中在单个封闭的 div — body_div下包含两个 div 元素和一个 span 元素。

句法

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span id = "add_to_array">add to array</span>
</div>

在上面的代码中，如果我们对body_div元素调用 getElements('div') 方法，我们会得到一个和两个 div，但 span 元素不会包含在数组中。如果要将其添加到数组中，请对数组变量调用include()方法。看看下面的脚本。

脚本

//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');

//first add your element to a var
var newToArray = $('add_to_array');

//then include the var in the array
myArray.include(newToArray);

现在，myArray 包含 div 和 span 元素。

结合（）

此方法用于将一个数组的元素与另一个数组的元素组合起来。这也可以处理重复的内容。例如，请考虑以下 HTML 代码，其中在单个且封闭的 div — body_div下包含两个 div 元素和两个 span 元素。

句法

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span class = "class_name">add to array</span>
   <span class = "class_name">add to array, also</span>
   <span class = "class_name">add to array, too</span>
</div>

在上面的代码中，对body_div元素调用 getElements('div') 方法。你得到一和两个div。调用 $$('.class_name') 方法选择两个 span 元素。您现在拥有一个 div 元素数组和另一个 span 元素数组。如果你想合并这两个数组，那么你可以使用combine方法()。看看下面的脚本。

脚本

//create your array just like we did before
var myArray= $('body_wrap').getElements('div');

//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');

//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );

现在，myArray 包含newArrayToArray 变量的所有元素。

例子

这将帮助您理解 MooTools 中的数组。假设我们将背景颜色应用于包含 div 和 span 的元素数组。看看下面的代码。在这里，第二个元素数组不属于任何 id 或类组，这就是它不反映任何背景颜色的原因。看看下面的代码。

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var myArray = $('body_wrap').getElements('.class_name');
            var addSpan = $('addtoarray');
            var addMany = $$('.addMany');
            
            myArray.include(addSpan);
            myArray.combine(addMany);
            
            var myArrayFunction = function(item) {
               item.setStyle('background-color', '#F7DC6F');
            }
            
            myArray.each(myArrayFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_wrap">
         <div class = "class_name">one</div>
         <div>two</div>
         <div class = "class_name">three</div>
         <span id = "addtoarray">add to array</span>
         <br /><span class = "addMany">one of many</span>
         <br /><span class = "addMany">two of many</span>
      </div>
   </body>
   
</html>

您将收到以下输出 -

输出

MooTools - 函数

MooTools 中的函数是来自 JavaScript 的概念。我们已经知道如何在 JavaScript 中使用函数。一般来说，最好将函数保留在 script 标签中的页面主体之外。在 MooTools 中，我们遵循相同的模式。在这里，您可以根据需要设计自己的功能。我们现在必须在domready函数中调用所有用户定义的函数。

查看以下语法以了解如何在 MooTools 中使用通用函数。

句法

<script type = "text/javascript">
   /*
   Function definitions go here
   */
   window.addEvent('domready', function() {
      /* Calls to functions go here */
   });
</script>

基本结构

在 MooTools 中定义函数有几种基本方法。JavaScript 和 MooTools 的函数语法没有区别，区别在于调用函数。让我们举一个小例子，定义一个名为 demo_function 的函数。看看下面的代码。

例子

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         //Define simple_function as a function
         var simple_function = function(){
            document.write('This is a simple function');
         }
         
         window.addEvent('domready', function() {
            //Call simple_function when the dom(page) is ready
            simple_function();
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 -

输出

单参数函数

您还可以创建一个接受参数的函数。要在函数中使用参数，您需要在括号中添加变量名称。一旦提供它，该变量就可以在内部使用。让我们举一个例子，它定义了一个函数，该函数接受单个参数并随参数一起打印一条消息。

看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var single_parameter_function = function(parameter){
            document.write('The parameter is : ' + parameter);
         }
         
         window.addEvent('domready', function(){
            single_parameter_function('DEMO PARAMETER');
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 -

输出

返回一个值

每当您想要使用一个函数的结果作为另一个变量的输入时，您都需要使用该函数的返回值。您可以使用 return 关键字从函数返回值。让我们举一个例子，它定义了一个函数，该函数接受两个参数值并返回这两个参数的总和。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var two_parameter_returning_function = function(first_number, second_number){
            var third_number = first_number + second_number;
            return third_number;
         }
         
         window.addEvent('domready', function(){
            var return_value = two_parameter_returning_function(10, 5);
            document.write("Return value is : " + return_value);
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 -

输出

MooTools - 事件处理

与选择器一样，事件处理也是 MooTools 的一个基本概念。这个概念用于创建事件和事件的操作。我们还需要了解行动及其效果。让我们尝试本章中的一些事件。

单击左键

Web 开发中最常见的事件是单击左键。例如，超链接可以识别单击事件并将您带到另一个 DOM 元素。第一步是向 DOM 元素添加单击事件。让我们举一个为按钮添加点击事件的例子。当您单击该按钮时，它将显示一条消息。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var clickFunction = function(){
            //put whatever you want to happen in here
            document.write('This button element recognizes the click event');
         }
         
         window.addEvent('domready', function() {
            $('id_name').addEvent('click', clickFunction);
         });
      </script>
   </head>
   
   <body>
      <input type = "button" id = "id_name" value = "click here"/>
   </body>
   
</html>

您将收到以下输出 -

输出

当您单击该按钮时，您将收到以下消息 -

This button element recognizes the click event

鼠标进入和鼠标离开

鼠标进入和鼠标离开是事件处理中最常见的事件。根据鼠标的位置应用该操作。如果鼠标的位置是 ENTER 到 DOM 元素中，那么它将应用一个操作。如果它离开 DOM 元素区域，那么它将应用另一个操作。

让我们举一个例子来解释鼠标 Enter 事件是如何工作的。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var mouseEnterFunction = function(){
            //put whatever you want to happen in here
            $('result').set('html', "Recognizes the mouse enter event");
         }
         
         window.addEvent('domready', function() {
            $('id_name').addEvent('mouseenter', mouseEnterFunction);
         });
      </script>
   </head>
   
   <body>
      <input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
      <lable id = "result"></lable>
   </body>
   
</html>

您将收到以下输出 -

输出

如果将鼠标指针保持在该按钮上，您将收到以下消息。

Recognizes the mouse enter event

让我们举一个例子来解释鼠标离开事件的工作原理。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var mouseLeaveFunction = function(){
            //put whatever you want to happen in here
            $('result').set('html', "Recognizes the mouse leave event");
         }
         
         window.addEvent('domready', function() {
            $('id_name').addEvent('mouseleave', mouseLeaveFunction);
         });
      </script>
   </head>
   
   <body>
      <input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
      <lable id = "result"></lable>
   </body>
   
</html>

您将收到以下输出 -

输出

如果将鼠标指针保持在该按钮上，您将收到以下消息。

Recognizes the mouse leave event

删除事件

该方法用于删除事件。删除事件与添加事件一样简单，并且遵循相同的结构。看看下面的语法。

句法

//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);

击键作为输入

MooTools 可以识别您的操作——您通过 DOM 元素给出的输入类型。通过使用keydown函数，您可以从输入类型 DOM 元素中读取每个键。

让我们举一个例子，其中有一个文本区域元素。现在让我们向文本区域添加一个 keydown 事件，每当文本区域识别到任何密钥库时，它都会立即响应一条警报消息。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var keydownEventFunction = function () {
            alert('This textarea can now recognize keystroke value');
         };
         
         window.addEvent('domready', function() {
            $('myTextarea').addEvent('keydown', keydownEventFunction);
         });
      </script>
   </head>
   
   <body>
      Write Something: <textarea id = "myTextarea"> </textarea>
   </body>
   
</html>

您将收到以下输出 -

输出

尝试在文本区域中输入一些内容。您将看到一个警告框以及以下消息。

This textarea can now recognize keystroke value

尝试在同一示例中添加一些文本，该示例在您输入文本区域时从文本区域读取值。可以通过将event.key函数与事件一起使用来实现。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         //notice the parameter "event" within the function parenthesis
         var keyStrokeEvent = function(event){
            var x = event.key;
            alert("The enter value is: "+x)
         }
         
         window.addEvent('domready', function() {
            $('myTextarea').addEvent('keydown', keyStrokeEvent);
         });
      </script>
   </head>
   
   <body>
      <lable>Write Something:</lable> <br/>
      <textarea id = "myTextarea"> </textarea>
   </body>
   
</html>

您将收到以下输出 -

输出

尝试在文本区域中输入文本。您将被引导至一个警告框以及您在文本区域中输入的值。

MooTools - DOM 操作

我们已经知道每个 HTML 页面都是使用 DOM 元素设计的。使用 MooTools，您可以操作 DOM 元素，这意味着您可以创建、删除和更改 DOM 元素的样式。

基本方法

以下是捕获和帮助修改 DOM 元素属性的基本方法。

得到（）

该方法用于检索元素属性，如src、value、name等。以下语句是get方法的语法。

句法

//this will return the html tag (div, a, span...) of the element 
$('id_name').get('tag');

使用 get() 方法检索元素时，您将收到以下属性列表。

ID
姓名
价值
链接地址
源代码
类（如果该元素将返回所有类）
文本（元素的文本内容）

放（）

该方法用于为变量设置值。这在与事件结合使用时非常有用，并允许您更改值。以下语句是 set 方法的语法。

句法

//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');

擦除（）

此方法可帮助您删除元素属性的值。您需要选择要从元素中删除的属性。以下语句是erase()方法的语法。

句法

//this will erase the href value of #id_name
$('id_name').erase('href');

移动元素

移动元素意味着将现有元素从页面上的一个位置移动到另一个位置。您可以使用inject() 方法在页面中移动元素。举个例子，一个HTML页面包含三个div元素，这三个div元素按顺序分别包含内容A、B和C。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var elementA = $('elemA');
            var elementB = $('elemB');
            var elementC = $('elemC');
         })
      </script>
   </head>
   
   <body>
      <div id = "body_wrap">
         <div id = "elemA">A</div>
         <div id = "elemB">B</div>
         <div id = "elemC">C</div>
      </div>
   </body>
   
</html>

您将收到以下输出 -

输出

现在，使用MooTools中的inject()方法，我们可以将顺序从ABC更改为ACB。这意味着，我们需要将 elementB 放置在 elementC 之后，并将 elementC 放置在 elementB 之前。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var elementA = $('elemA');
            var elementB = $('elemB');
            var elementC = $('elemC');
            
            //translates to: inject element C before element B
            elementC.inject(elementB, 'before');
            
            //translates to: inject element B after element C
            elementB.inject(elementC, 'after');
         });
      </script>
   </head>
   
   <body>
      <div id = "body_wrap">
         <div id = "elemA">A</div>
         <div id = "elemB">B</div>
         <div id = "elemC">C</div>
      </div>
   </body>
   
</html>

您将收到以下输出 -

输出

创建新元素

MooTools 提供了一个选项来创建任何类型的 DOM 元素并将其插入 HTML 页面。但是，我们必须为每个元素维护正确的语法。让我们举一个例子，其中以下代码片段是创建（锚）元素的语法。

句法

var el = new Element('a', {
   id: 'Awesome',
   title: 'Really?',
   text: 'I\'m awesome',
   href: 'http://MooTools.net',
   
   events: {
      'click': function(e) {
         e.preventDefault();
         alert('Yes, really.');
      }
   },
   styles: {
      color: '#f00'
   }
});

让我们举一个使用 MooTools 库创建锚元素的示例。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            
            var el = new Element('a', {
               id: 'Awesome',
               title: 'Really?',
               text: 'I\'m awesome',
               href: 'http://www.tutorialspoint.com',
               
               events: {
                  'click': function(e) {
                     e.preventDefault();
                     alert('Yes, really.');
                  }
               },
               styles: {
                  color: '#f00'
               }
            });
            el.inject(document.body);
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 -

输出

MooTools - 样式属性

MooTools 提供了一些特殊的方法来设置和获取 DOM 元素的样式属性值。我们使用不同的样式属性，例如宽度、高度、背景颜色、字体粗细、字体颜色、边框等。通过为这些样式属性设置和获取不同的值，我们可以以不同的样式呈现 HTML 元素。

设置和获取样式属性

MooTools 库包含不同的方法，用于设置或获取特定样式属性或多个样式属性的值。

设置样式()

此方法允许您设置 DOM 元素的单个属性的值。该方法将作用于特定 DOM 元素的选择器对象。让我们举一个为 div 元素提供背景颜色的示例。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            $('body_wrap').setStyle('background-color', '#6B8E23');
            $$('.class_name').setStyle('background-color', '#FAEBD7');
         });
      </script>
   </head>
   
   <body>
      <div id = "body_wrap">A</div>
      <div class = "class_name">B</div>
      <div class = "class_name">C</div>
      <div class = "class_name">D</div>
      <div class = "class_name">E</div>
   </body>
   
</html>

您将收到以下输出 -

输出

获取样式()

getStyle() 方法用于检索元素的样式属性的值。让我们举一个检索名为 body_wrap 的 div 的背景颜色的示例。看看下面的语法。

句法

//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');

多种样式属性

MooTools 库包含用于设置或获取特定样式属性或多个样式属性的值的不同方法。

设置样式()

如果要在单个元素或元素数组上设置多个样式属性，则必须使用 setStyle() 方法。看一下 setStyle() 方法的以下语法。

句法

$('<element-id>').setStyles({
   //use different style properties such as width, height, background-color, etc.
});

例子

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 200px;
            height: 200px;
            background-color: #eeeeee;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var setWidth = function(){
            $('body_div').setStyles({
               'width': 100
            });
         }
         var setHeight = function(){
            $('body_div').setStyles({
               'height': 100
            });
         }
         var reset = function(){
            $('body_div').setStyles({
               'width': 200,
               'height': 200
            });
         }
         
         window.addEvent('domready', function() {
            $('set_width').addEvent('click', setWidth);
            $('set_height').addEvent('click', setHeight);
            $('reset').addEvent('click', reset);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "set_width" value = "Set Width to 100 px"/>
      <input type = "button" id = "set_height" value = "Set Height to 100 px"/>
      <input type = "button" id = "reset" value = "Reset"/>
   </body>
   
</html>

您将收到以下输出 -

输出

在网页上尝试这些按钮，您可以看到 div 大小的差异。

MooTools - 输入过滤

MooTools可以过滤用户输入，并且可以轻松识别输入的类型。基本输入类型是数字和字符串。

数字函数

让我们讨论一些检查输入值是否为数字的方法。这些方法还将帮助您操作数字输入。

toInt()

此方法将任何输入值转换为整数。您可以在变量上调用它，它将尝试从变量包含的任何内容中给出常规整数。

让我们举一个例子，设计一个包含文本框和名为TO INT 的按钮的网页。该按钮将检查并返回您在文本框中输入的实数值。如果该值不是整数，则它将返回NaN符号。看看下面的代码。

例子

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var toIntDemo = function(){
            var input = $('input').get('value');
            var number = input.toInt();
            alert ('Value is : ' + number);
         }
         
         window.addEvent('domready', function() {
            $('toint').addEvent('click', toIntDemo);
         });
      </script>
   </head>
   
   <body>
      Enter some value: <input type = "text" id = "input" />
      <input type = "button" id = "toint" value = "TO INT"/>
   </body>
   
</html>

您将收到以下输出 -

输出

尝试不同的值并将它们转换为实数。

类型（）

此方法检查您传递的变量的值，并返回该值的类型。

让我们举个例子，我们设计一个网页并检查输入值是数字、字符串还是布尔值。看看下面的代码。

例子

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var checkType = function(){
            var input = $('input').get('value');
            var int_input = input.toInt();
            
            if(typeOf(int_input) != 'number'){
               if(input == 'false' || input == 'true'){
                  alert("Variable type is : Boolean"+" - and value is: "+input);
               } else{
                  alert("Variable type is : "+typeof(input)+" - and value is: "+input);
               }
            } else{
               alert("Variable type is : "+typeof(int_input)+" 
                  - and value is:"+int_input);
            }
         }
         
         window.addEvent('domready', function() {
            $('checktype').addEvent('click', checkType);
         });
      </script>
   </head>
   
   <body>
      Enter some value: <input type = "text" id = "input" />
      <input type = "button" id = "checktype" value = "CHECK TYPE"/>
   </body>
   
</html>

您将收到以下输出 -

输出

尝试不同的值并检查类型。

限制（）

limit() 方法用于设置特定数字的下限值和上限值。该数量不应超过上限值。如果超过，则将该数字更改为上限值。这个过程也与下界相同。

让我们举一个例子，它提供了一个用于输入值的文本框，提供了一个按钮来检查该值的限制。我们在示例中使用的默认限制是 0 到 255。请看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var checkLimit = function(){
            var input = $('input').get('value');
            var number = input.toInt();
            var limited_number = number.limit(0, 255);
            alert("Number is : " + limited_number);
         }
         
         window.addEvent('domready', function() {
            $('check_limit').addEvent('click', checkLimit);
         });
      </script>
   </head>
   
   <body>
      Enter some value: <input type = "text" id = "input" />
      <input type = "button" id = "check_limit" value = "Check Limit (0 to 255)"/>
   </body>
   
</html>

您将收到以下输出 -

输出

尝试不同的数字来检查限制。

rgbToHex()

rgbToHex() 方法是将红、绿、蓝值转换为十六进制值。该函数处理数字，属于Array集合。让我们举一个例子，我们将设计一个网页来输入红色、绿色和蓝色的单独值。提供一个按钮将所有三个值转换为十六进制值。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var rgbToHexa_Demo = function(){
            var red = $('red').get('value');
            var red_value = red.toInt();
            var green = $('green').get('value');
            var green_value = green.toInt();
            var blue = $('blue').get('value');
            var blue_value = blue.toInt();
            var color = [red_value, green_value, blue_value].rgbToHex();
            alert(" Hexa color is : " + color);
         }
         
         window.addEvent('domready', function() {
            $('rgbtohex').addEvent('click', rgbToHexa_Demo);
         });
      </script>
   </head>
   
   <body>
      Red Value: <input type = "text" id = "red" /><br/><br/>
      Green Value: <input type = "text" id = "green" /><br/><br/>
      Blue Value: <input type = "text" id = "blue" /><br/><br/>
      <input type = "button" id = "rgbtohex" value = "RGB To HEX"/>
   </body>
   
</html>

您将收到以下输出 -

输出

尝试不同的红色、绿色和蓝色值并找到十六进制值。

字符串函数

让我们讨论 String 类的一些可以操作输入 String 值的方法。在继续之前，让我们看一下以下如何调用字符串函数的语法。

细绳

var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();

或者，

var result_of_function = "Heres some text".someStringFunction();

修剪（）

该方法用于删除给定字符串的开头位置和结尾位置的空格。它不会触及字符串内的任何空格。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var input_str = " This is tutorialspoint.com ";
            document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");
            
            var trim_string = input_str.trim();
            document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 -

输出

在上面的警告框中，您可以发现调用trim()方法之前和调用trim()方法之后String的差异。

干净的（）

此方法用于删除给定字符串中的所有空格并在单词之间保留单个空格。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var input_str = " This is tutorialspoint.com ";
            document.writeln("<pre>Before clean String is : |-"+input_str+"-|</pre>");
            
            var trim_string = input_str.clean();
            document.writeln("<pre>After clean String is : |-"+trim_string+"-|</pre>");
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 -

输出

包含（）

该方法用于搜索给定字符串中的子字符串。如果给定字符串包含搜索字符串，则返回 true，否则返回 false。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var containsString = function(){
            var input_string = "Hai this is tutorialspoint";
            var search_string = $('input').get('value');
            var string_contains = input_string.contains(search_string);
            alert("contains : " + string_contains);
         }
         
         window.addEvent('domready', function() {
            $('contains').addEvent('click', containsString);
         });
      </script>
   </head>
   
   <body>
      Given String : <p>Hai this is tutorialspoint</p>
      Enter search string: <input type = "text" id = "input" />
      <input type = "button" id = "contains" value = "Search String"/>
   </body>
   
</html>

您将收到以下输出 -

输出

代替（）

该方法用于将输入字符串插入到主字符串中。看看下面的代码。

例子

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var containsString = function(){
            var input_string = "One is {one}, Two is {two}, Three is {three}";
            var one_str = $('one').get('value');
            var two_str = $('two').get('value');
            var three_str = $('three').get('value');
            
            var substitution_string = {
               one : one_str,
               two : two_str,
               three : three_str
            }
            var new_string = input_string.substitute(substitution_string);
            document.write("NEW STRING IS : " + new_string);
         }
            
         window.addEvent('domready', function() {
            $('contains').addEvent('click', containsString);
         });
      </script>
   </head>
   
   <body>
      Given String : <p>One is {one}, Two {two}, Three is {three}</p>
      one String : <input type = "text" id = "one" /><br/><br/>
      two String : <input type = "text" id = "two" /><br/><br/>
      three String : <input type = "text" id = "three" /><br/><br/>
      <input type = "button" id = "contains" value = "Substitute String"/>
   </body>
   
</html>

您将收到以下输出 -

输出

在三个文本框中输入文本，然后单击替换字符串按钮，然后您将看到替换字符串。

MooTools - 拖放

MooTools 提供了一个强大的功能，可以帮助您向网页元素添加拖放功能。我们可以通过创建自己的新Drag.Move对象来做到这一点。使用此对象，您可以定义选项和事件。Drag 和 Drag.Move 类来自 MooTools More 库。

让我们讨论一下 Drag.Move 对象的选项和事件。

拖动移动

Drag.Move 是一个用于向 html 元素添加拖放功能的对象。Drag.Move扩展了Drag，因此我们可以通过Drag.Move对象使用Drag类的所有选项和事件。查看以下语法并了解如何使用 Drag.Move 对象。

句法

var myDrag = new Drag.Move(dragElement, {
   // Drag.Move Options
   droppables: dropElement,
   container: dragContainer,
   
   // Drag Options
   handle: dragHandle,

   // Drag.Move Events
   // the Drag.Move events pass the dragged element,
   // and the dropped into droppable element
   onDrop: function(el, dr) {
      //will alert the id of the dropped into droppable element
      alert(dr.get('id'));
   },
   // Drag Events
   // Drag events pass the dragged element
   onComplete: function(el) {
      alert(el.get('id'));
   }
});

拖移选项

Drag.Move 提供以下选项来通过拖放功能维护 html 元素 -

droppable - 这可以帮助您设置可放置元素（在与放置相关的事件上注册的元素）的选择器。
容器- 这可以帮助您设置拖动元素的容器（将元素保留在内部）。
snap - 这可以帮助您设置在可拖动元素开始拖动之前用户必须拖动光标的像素数。默认值为 6，您可以将其设置为代表数字的任意数量的变量。
handle - 这可以帮助您向可拖动元素添加句柄。句柄成为唯一接受抓取的元素。

查看以下语法，了解如何以及在何处定义可放置元素、容器元素、捕捉元素和句柄元素。

句法

//here we define a single element by id
var dragElement = $('drag_element');

//here we define an array of elements by class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
var dragHandle = $('drag_handle');

//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
   // Drag.Move Options
   // set up our droppables element with the droppables var we defined above
   droppables: dropElements ,
   
   // set up our container element with the container element var
   container: dragContainer
   
   // set up pixels the user must drag.
   Snap: 10
   
   // Adds a handle to your draggable element
   handle: dragHandle
});

拖动.移动事件

Drag.Move 事件提供了可在不同级别的操作中使用的不同功能。例如，当您开始拖放对象时，每个 Drag.Move 事件都会将拖动的元素或放下的元素作为参数传递。

以下是支持的事件 -

onStart()

这会在拖动开始时引发一个事件。如果您设置了长捕捉，则直到鼠标处于一定距离时才会引发此事件。看看下面的语法。

句法

var myDrag = new Drag.Move(dragElement , {
   // Drag options will pass the dragged element as a parameter
   onStart: function(el) {
      // put whatever you want to happen on start in here
   }
});

onDrag()

当您拖动元素时，这会连续引发事件。看看下面的语法。

句法

var myDrag = new Drag.Move(dragElement , {
   // Drag options will pass the dragged element as a parameter
   onDrag: function(el) {
      // put whatever you want to happen on drag in here
   }
});

onDrop()

这就提出了一个