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

     MooTools是一个精简、模组化同时也面向对象的JavaScript框架，它设计给中等和进阶的JavaScript开发人员使用。使用MooTools优美、详细而条理分明的API，可让你写出强大、富有弹性且跨浏览器的程序。和jQuery一样，MooTools也是非常优秀的JavaScript框架。不过相对jQuery来说，MooTools的相关资源实在太少了。正如本文作者所言，MooTools代表了“    <strong>My Object Oriented Tools</strong>”。    <br />    <br /> 本文介绍了MooTools框架的一些基本知识，非常有用（关于MooTools与jQuery的区别，可以看看MooTools开发人员同时也是    <em><a href="http://www.amazon.com/gp/product/1430209836?ie=UTF8&tag=clientside-20&link_code=as3&camp=211189&creative=373489&creativeASIN=1430209836" target="_blank">MooTools Essentials</a></em>一书作者写的这篇    <a href="/misc/goto?guid=4958201433733868779" target="_blank">文章</a>）。下为全文：    <br />    <br /> 如果你熟悉MooTools，以下介绍的内容可能你已经经历过了。但如果是MooTools新手，那么弄懂这些对你将很有用，因为它们是所有MooTools代码都可能面临的。    <br />    <br />    <strong>一、DOM就绪</strong>    <br />    <br /> 这是在DOM定义时执行的窗体事件。MooTools团队设计该事件在DOM初始化时即发生。    <br />    <br /> 这一设计旨在解决window.load事件的弊端。    <br />    <br /> 通过DomReady，我们可以在DOM加载时即执行脚本而无须等待图片或其他脚本的加载。    <br />    <br /> 如果你想确保代码在试图访问DOM元素时它存在，最好在将代码放至“Dom Ready”事件中。    <br />    <br /> 下面是其一个代码片段。    <br />    <pre class="JavaScript" name="code">window.addEvent('domready', function(){      // Your code here      console.log('DOM is ready....')    });</pre>    <br /> Domready与window.load的区别可以查看这篇    <a href="/misc/goto?guid=4958201434483928341" target="_blank">文章</a>。    <br />    <br />    <strong>二、创建新元素</strong>    <br />    <br /> 为了构建丰富的Web应用程序或者更好地利用AJAX技术，你可能不得不不断地去创建HTML元素。使用MooTools则很容易创建一个新的元素。    <br />    <br /> 你可以轻松地新建元素插入其他元素中或者body标签内部。也可以将各种事件绑定到该元素。    <br />    <pre class="JavaScript" name="code">  // Create Basic Div Element with    // class "className"    var main_box  = new Element('div', {'class': 'className'});</pre>    <br /> 运行上面的代码，将创建一个DIV，不过在网页上你还不能看到任何东西。这是因为你必须将DIV插入其他元素或body中。因此，你应该再增加一行代码。    <br />    <pre class="JavaScript" name="code">  // Create Basic Div Element with    // class "className"    var main_box  = new Element('div', {'class': 'className'});        // place element into Body tag    $$('body').adopt(main_box);</pre>    <br />    <strong>三、元素选择器</strong>    <br />    <br /> 元素选择器是所有JavaScript框架都必须拥有的组件。MooTools使用了一个机灵而独立的选择器引擎。    <br />    <br /> 在MooTools中，使用$和document.id来代替document.getElementById。你只需要提交元素的ID。$$用于获取那些多重的元素，比如那些带有特定类名或者特定编号的元素。    <br />    <br /> $和document.id将返回所选元素的对象，而$$返回选定元素的数组。    <br />    <br /> 让我们来看看在MooTools中选择HTML元素的各种方式。    <br />    <pre class="JavaScript" name="code">  // 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')</pre>    <br />    <strong>四、事件绑定</strong>    <br />    <br /> 在Mootools中你可以将各种事件绑定到HTML元素中，这可通过addEvent方法来实现。不过，你需要先将欲绑定事件的元素对象化。    <br />    <pre class="JavaScript" name="code">var obj = $('id_of_div');      obj.addEvent('click', function(){      alert('I am clicked');    });</pre>    <br /> 上面的代码即实现了将事件绑定至对象化的HTML元素。当然你也可以在一个元素中绑定多个事件。    <br />    <br /> 使用MooTools如何创建一个自定义的事件可以查看这篇    <a href="/misc/goto?guid=4958201435217286679" target="_blank">文章</a>。    <br />    <br />    <strong>五、元素的基本类型</strong>    <br />    <br /> 基本的样式包括为元素添加/删除CSS属性或者css类。同样，在执行此项任务前你需要先将元素对象化。    <br />    <pre class="JavaScript" name="code">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');</pre>    <br />    <strong>六、浏览器类型判断</strong>    <br />    <br /> MooTools框架有着很好的类可以用来检测用户的浏览器类型。看看下面的代码你就会了解了。    <br />    <pre class="JavaScript" name="code">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;  }</pre>    <br />    <strong>最后</strong>    <br />    <br /> 关于MooTools框架要学习的还有很多，但在使用MooTools创建类及它的其他高级功能前请务必先弄请上述这些，因为它们都是基础。欢迎发表任何评论。    <br />    <br /> Via     <a href="/misc/goto?guid=4958201435951843746" target="_blank">xpertdeveloper</a>    <br />    <br /> 来自：http://www.iteye.com/news/23492