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

最新推荐文章于 2024-08-16 08:22:42 发布

lcathm

最新推荐文章于 2024-08-16 08:22:42 发布

阅读量701

点赞数

分类专栏： php html

html 同时被 2 个专栏收录

40 篇文章

订阅专栏

php

32 篇文章

订阅专栏

http://www.iteye.com/news/23492

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”事件中。

下面是其一个代码片段。

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

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

二、创建新元素

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

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

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

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

    Javascript代码  
  
 // 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元素的各种方式。

    Javascript代码  
  
 // 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方法来实现。不过，你需要先将欲绑定事件的元素对象化。

    Javascript代码  
  
 var obj = $('id_of_div');  
   
   obj.addEvent('click', function(){  
     alert('I am clicked');  
   });  

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

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

五、元素的基本类型

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

    Javascript代码  
  
 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框架有着很好的类可以用来检测用户的浏览器类型。看看下面的代码你就会了解了。

    Javascript代码  
  
 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;  
 }  