开始使用Mootools-js教程-PHP中文网

Getting Started with MooTools

本教程介绍了当今最流行的JavaScript框架之一：MooTools。MooTools（代表My Object Oriented Tools）兼容Internet Explorer 6 、Firefox、Opera和Chrome。MooTools的设计目标是紧凑、模块化且面向对象。MooTools专为中高级JavaScript程序员设计，因此在深入学习之前，请确保您具备足够的经验。

核心要点

MooTools（代表My Object Oriented Tools）是一个紧凑、模块化且面向对象的JavaScript框架。它兼容Internet Explorer 6 、Firefox、Opera和Chrome，专为中高级JavaScript程序员设计。
该框架包含诸如元素选择器、DomReady事件、元素创建、事件绑定和浏览器检测等功能。元素选择器简化了通过ID、类或属性模式选择元素的操作。DomReady事件在DOM加载后立即执行，从而允许更快地执行脚本。事件绑定允许在某些事件发生时执行代码，而浏览器检测则根据用户的浏览器方便地进行条件代码编写。
MooTools高度可定制，允许开发人员选择和修改他们想要使用的组件。这提高了脚本的效率并改善了性能。它还提供了与其他JavaScript库的兼容性，并提供了一个名为浏览器抽象的功能，该功能规范化了不同浏览器之间的差异，以实现一致的代码性能。

获取MooTools

获取MooTools非常简单。MooTools分为两部分，称为核心和更多。核心包含框架的核心类和模块，而更多则包含可以根据应用程序需求包含的附加类。MooTools拥有强大的构建器页面，可以根据我们的需求定制核心和更多。MooTools核心的当前稳定版本（撰写本文时）是1.4.5，更多是1.4.0.1。

元素选择器

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

通过ID选择元素

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

var element = $('id_of_element');

登录后复制

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

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

登录后复制

通过类选择元素

这将返回具有特定类的元素数组。要获取每个单独的元素，我们需要遍历数组，如下所示。

var element = $('id_of_element');

登录后复制

通过属性模式选择元素

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

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

登录后复制

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

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

登录后复制

DomReady事件

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

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

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

登录后复制

元素创建

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

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

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

登录后复制

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

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

登录后复制

执行此代码时，您可以在结束body标签之前看到添加的新div。

事件绑定

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

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

登录后复制

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

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

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

登录后复制

浏览器检测

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

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

登录后复制

结论

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

(后续的FAQ部分可以根据需要进行类似的改写，保持内容一致性的同时调整措辞和句式)

以上是开始使用Mootools的详细内容。更多信息请关注PHP中文网其他相关文章！