MooTools入门

本教程介绍了当今最流行的JavaScript框架之一MooTools。 MooTools代表“ 我的面向对象的工具” ，它与Internet Explorer 6 +，Firefox，Opera和Chrome兼容。 MooTools设计为紧凑，模块化，并且当然是面向对象的。 MooTools是专为中级到高级JavaScript程序员而设计的，因此请务必先掌握足够的经验。

获取MooTools

获取MooTools非常简单。 MooTools分为两个部分，称为Core和More。 Core包含框架的核心类和模块，而More包含可根据应用程序需求包含的其他类。 MooTools具有强大的构建器页面，可以根据我们的需求自定义Core和More 。 MooTools Core的当前稳定版本（在撰写本文时）为1.4.5，而其他则为1.4.0.1。

元素选择器

任何JavaScript框架中最基本的操作之一就是元素的选择。 MooTools使用Slick作为选择器引擎。 MooTools支持许多不同类型的选择器。 本节介绍一些最有用和最重要的选择器。

通过ID选择元素

如果要在纯JavaScript中按ID选择元素，则需要使用较长的document.getElementById('id_of_element')语法。 与许多其他JavaScript框架一样，MooTools通过使用$选择元素来缩短此时间。 您的代码最终看起来像这样：

var element =  $('id_of_element');

如果您在同一页面上包含MooTools和其他使用$库（例如jQuery），则会造成问题。 为了克服这种情况，MooTools提供了document.id()作为选择元素的另一种方法。 现在，您通过id选择元素的代码如下所示：

var element =  document.id('id_of_element');

按类别选择元素

这将返回某个类的元素数组。 要获得每个单独的元素，我们需要遍历数组，如下所示。

$$('.class_name').each(function(ele){
  console.log(ele);
});

通过属性模式选择元素

以下示例选择其id和class属性以某种模式开头的元素。

$$('[id^=id_start_]').each(function(ele){
  console.log(ele);
});

$$('[class^=class_start_]').each(function(ele){
  console.log(ele);
});

同样，以下示例匹配其id和class属性以某种模式结尾的元素。

$$('[id$=_end_id]').each(function(ele){
  console.log(ele);
});

$$('[class$=_end_class]').each(function(ele){
  console.log(ele);
});

DomReady事件

DomReady是只能绑定到窗口对象的事件。 DomReady在DOM加载后立即执行，这可能比window.load事件要早得多，该事件等待所有其他资源加载。 我建议阅读DomReady和window.load深度比较 。 以下示例使用DomReady等待DOM加载后再进行查询。

window.addEvent('domready', function(){
  if(document.id('id_of_element'))
  {
    alert('Element Exists');
  }
});

元素创作

MooTools可以创建新的HTML元素并将其注入DOM。 在MooTools中创建新的HTML元素非常简单。 例如，以下代码创建一个新的div元素。

var new_div = new Element('div', {'class': 'new_div'});

先前的代码创建了一个新元素，但没有将其注入DOM。 要执行注入，您需要调用adopt()方法。 以下示例显示了此操作的完成方式。

var new_div = new Element('div', {'class': 'new_div'});

$$('body').adopt(new_div);

执行此代码后，您可以看到在关闭body标签之前添加了新的div 。

事件绑定

事件绑定导致在元素上执行某些事件时执行代码。 单击，双击和悬停是常见事件的示例。 您还可以创建自己的自定义事件，但这超出了本文的范围。 作为MooTools事件绑定的示例，以下代码向元素添加了一个简单的click事件处理程序。

document.id('id_of_ele').addEvent('click', function(){
  console.log('I was just clicked');
});

您还可以将事件添加到动态创建的元素中。 以下代码将点击处理程序添加到动态创建的元素中。

var new_div = new Element('div', {'class': 'new_div'});
$$('body').adopt(new_div);
new_div.addEvent('click', function(){
  console.log('I was just clicked');
});

浏览器检测

最后但并非最不重要的是使用MooTools进行浏览器检测。 当您要基于用户的浏览器编写条件代码时，这是必需的。 MooTools提供了Browser对象，该对象在页面加载时填充。 以下示例使用switch语句标识当前浏览器。

switch(Browser.name)
{
  case "safari":
    console.log('I am Safari');
    break;
  case "chrome":
    console.log('I am Chrome');
    break;
  case "firefox":
    console.log('I am FireFox');
    break;
  case "opera":
    console.log('I am Opera');
    break;
  case "ie":
    console.log('I am IE');
    break;
}

结论

本文介绍了许多MooTools基础知识。 有大量的资源可用于学习有效地使用MooTools。 我从MooTools文档和David Walsh博客中学到了很多东西。 您也可以参考我的MooTools作品 。

From: https://www.sitepoint.com/getting-started-with-mootools/