关于MooTools你应该熟知的6个基本知识

MooTools是一个精简、模组化同时也面向对象的JavaScript框架，它设计给中等和进阶的JavaScript开发人员使用。使用MooTools优美、详细而条理分明的API，可让你写出强大、富有弹性且跨浏览器的程序。和jQuery一样，MooTools也是非常优秀的JavaScript框架。不过相对jQuery来说，MooTools的相关资源实在太少了。正如本文作者所言，MooTools代表了“My Object Oriented Tools”。

本文介绍了MooTools框架的一些基本知识，非常有用（关于MooTools与jQuery的区别，可以看看MooTools开发人员同时也是MooTools Essentials一书作者写的这篇文章）。下为全文：

如果你熟悉MooTools，以下介绍的内容可能你已经经历过了。但如果是MooTools新手，那么弄懂这些对你将很有用，因为它们是所有MooTools代码都可能面临的。

一、DOM就绪

这是在DOM定义时执行的窗体事件。MooTools团队设计该事件在DOM初始化时即发生。

这一设计旨在解决window.load事件的弊端。

通过DomReady，我们可以在DOM加载时即执行脚本而无须等待图片或其他脚本的加载。

如果你想确保代码在试图访问DOM元素时它存在，最好在将代码放至“Dom Ready”事件中。

下面是其一个代码片段。

window.addEvent('domready', function(){
// Your code here
console.log('DOM is ready....')
});

window.addEvent('domready', function(){
    // Your code here
    console.log('DOM is ready....')
  });

Domready与window.load的区别可以查看这篇文章。

二、创建新元素

为了构建丰富的Web应用程序或者更好地利用AJAX技术，你可能不得不不断地去创建HTML元素。使用MooTools则很容易创建一个新的元素。

你可以轻松地新建元素插入其他元素中或者body标签内部。也可以将各种事件绑定到该元素。

// Create Basic Div Element with
// class "className"
var main_box = new Element('div', {'class': 'className'});

  // Create Basic Div Element with
  // class "className"
  var main_box  = new Element('div', {'class': 'className'});

运行上面的代码，将创建一个DIV，不过在网页上你还不能看到任何东西。这是因为你必须将DIV插入其他元素或body中。因此，你应该再增加一行代码。

// Create Basic Div Element with
// class "className"
var main_box = new Element('div', {'class': 'className'});

// place element into Body tag
$$('body').adopt(main_box);

  // Create Basic Div Element with
  // class "className"
  var main_box  = new Element('div', {'class': 'className'});
  
  // place element into Body tag
  $$('body').adopt(main_box);

三、元素选择器

元素选择器是所有JavaScript框架都必须拥有的组件。MooTools使用了一个机灵而独立的选择器引擎。

在MooTools中，使用$和document.id来代替document.getElementById。你只需要提交元素的ID。$$用于获取那些多重的元素，比如那些带有特定类名或者特定编号的元素。

$和document.id将返回所选元素的对象，而$$返回选定元素的数组。

让我们来看看在MooTools中选择HTML元素的各种方式。

// get Element with ID "name"
$('name')
document.id('name')

// Get All Elements with Class "class"
$$('.class')

// Get All Elements which
// ID starting with "demo_"
$$('[id^=demo_]')

// Get All Elements
// ID Ending with "_demo"
$$('[id$=_demo]')

// Get All Div Elements
// class ending with "_demo"
$$('div[class$=_demo]')

// Get all links with class "demo_link"
$$('a.demo_link')

  // get Element with ID "name"
  $('name')
  document.id('name')

  // Get All Elements with Class "class"
  $$('.class')
  
  // Get All Elements which
  // ID starting with "demo_"
  $$('[id^=demo_]')

  // Get All Elements 
  // ID Ending  with "_demo"
  $$('[id$=_demo]')
  
  // Get All Div Elements 
  // class ending  with "_demo"
  $$('div[class$=_demo]')
  
  // Get all links with class "demo_link"
  $$('a.demo_link')

四、事件绑定

在Mootools中你可以将各种事件绑定到HTML元素中，这可通过addEvent方法来实现。不过，你需要先将欲绑定事件的元素对象化。

var obj = $('id_of_div');

obj.addEvent('click', function(){
alert('I am clicked');
});

var obj = $('id_of_div');

  obj.addEvent('click', function(){
    alert('I am clicked');
  });

上面的代码即实现了将事件绑定至对象化的HTML元素。当然你也可以在一个元素中绑定多个事件。

使用MooTools如何创建一个自定义的事件可以查看这篇文章。

五、元素的基本类型

基本的样式包括为元素添加/删除CSS属性或者css类。同样，在执行此项任务前你需要先将元素对象化。

var obj = $('id_here');

// Add Single Style
obj.setStyle('color','#000000');

// Add Multiple Styles
obj.setStyles({
'color':'#000000',
'float':'left'
});

// Remove Style
obj.removeStyle('color');

// Add Class
obj.addClass('class1');

// Remove Class
obj.removeClass('class1');

var obj = $('id_here');
  
  // Add Single Style
  obj.setStyle('color','#000000');
  
  // Add Multiple Styles
  obj.setStyles({
    'color':'#000000',
    'float':'left'
  });
  
  // Remove Style
  obj.removeStyle('color');
  
  // Add Class
  obj.addClass('class1');
  
  // Remove Class
  obj.removeClass('class1');

六、浏览器类型判断

MooTools框架有着很好的类可以用来检测用户的浏览器类型。看看下面的代码你就会了解了。

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

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

最后

关于MooTools框架要学习的还有很多，但在使用MooTools创建类及它的其他高级功能前请务必先弄请上述这些，因为它们都是基础。欢迎发表任何评论。

Via xpertdeveloper