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

11顶
1踩

2011-11-25 17:53 by 资深编辑 luiang1018 评论(6) 有12487人浏览

MooTools JavaScrilpt

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....')
  });

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

二、创建新元素

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

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

  // 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);

三、元素选择器

元素选择器是所有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')

四、事件绑定

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

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');

六、浏览器类型判断

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;
}

最后

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

Via xpertdeveloper

分享到：

11
顶

1
踩

评论共 6 条请登录后发表评论

6 楼 beidajadebird 2014-07-16 14:48

5 楼 wenxiang_tune 2011-11-28 09:27

写得很好，谁用谁知道。

4 楼 hlylove 2011-11-26 18:51

这是新闻？

3 楼 zhangpurple 2011-11-26 15:41

Mootools 和jquery 在一个数量级上没有，就比如java和C#

2 楼 Pigwen 2011-11-26 11:57

jQuery makes DOM fun, Mootools makes Javascript fun.

1 楼 mvpzhoulong 2011-11-26 11:43

一直用JQUERY

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

FileZilla 使用过程中可能遇到问题及解决办法

FileZilla，可以说是目前最好的FTP工具，自从有了它，我就不再使用FlashFXP，还是开源免费的软件好!它的多线程上传下载是最牛B的，可达10线程，大大提高了传输速度，节约了您的宝贵时间，强烈推荐大家使用。废话不多说，下面说一下本人在使用过程中遇到的问题，可能大家曾经或将来也会遇到的。 1.在传输意外中断，想续传或覆盖时，提示类似 ftpcontrolsocket.cpp(

FilaZilla: Waiting for replies to skip before sending next command...

方法：在编辑－设置－连接里，把超时秒数改为非0 即可。

windows server 2008 Asp.net 网站环境配置

1.建立用户www,隶属于:

如果你还在彷徨，看看这些...

4、掌握多线程、动态链接库、OCX等软件开发基础知识，具有Windows图形显示编程经验优先考虑； 5、熟悉Microsoft SQL Server数据库的使用，具有数据库设计与SQL开发经验； 6、数学基础扎实，具有较强的算法...

js面试题

1、介绍js的基本数据类型　答： Undefined、Null、Boolean、Number、String 　 2、js有哪些内置对象？　答：数据封装类对象：Object、Array、Boolean、Number 和 String 　其他对象：Function、...

漫谈js自定义事件、DOM/伪DOM自定义事件

一、说明、引言我JS还是比较薄弱的，本文的内容属于边学边想边折腾...事件是个大课题，真要从断奶开始讲起的话，可以写个12期的连载。关于JS事件的文章（类似DOM/BOM事件模型，IE与其他浏览器事件差异，DOM1/DOM2事

前端学习--js.2

写一个通用的事件侦听器函数 markyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window....

那些年我准备的前端面试题

commonJS相关： (1)在commonJS规范中，require,exports,module，__filename,__dirname都是通过动态编译后添加到模块的...而且必须弄清楚一点：exports是一个对象，如果重新赋值，那么不会反映到外面，但是module.expo

迁移其他jquery文章之二

界面展示是很简单的：我尽量在讲解一个知识点的时候不掺杂其他知识点，这样更有针对性，我认为，不然看起来代码既多又没有重点了。十五、jquery实现图片放大镜的效果这个案例注定又是一个吊炸天的分享，就不...

spring 异步编程样例

带有 python 3 和 opencv 4.1 的 Docker 映像.zip

带有 python 3.7 和 opencv 4.1.0 的 Docker 映像用法docker run -it jjanzic/docker-python3-opencv python>>> import cv2带有标签的图像包含使用contrib 模块:contrib构建的 docker 镜像可用的docker标签列表opencv-4.1.0（latest分支）contrib-opencv-4.1.0（opencv_contrib分支）opencv-4.0.1contrib-opencv-4.0.1opencv-4.0.0contrib-opencv-4.0.0opencv-3.4.2contrib-opencv-3.4.2opencv-3.4.1contrib-opencv-3.4.1opencv-3.4.0contrib-opencv-3.4.0opencv-3.3.0contrib-opencv-3.3.0opencv-3.2.0contrib-opencv-3.2.0

原生js鼠标滑过文字淡入淡出效果.zip

1-中国各省、市、区、县距离港口和海岸线的距离计算代码+计算结果-社科数据.zip

中国各城市、区、县距离港口和海岸线的距离数据集提供了全国各城市及区、县的坐标信息，以及各个港口和海岸线的坐标信息。通过R语言计算，得出了各城市、区县与港口和海岸线之间的距离。该数据集包含了各港口的经纬度、各城市与港口之间的距离、各区县与港口之间的距离、中国各城市质心与港口的最近距离、中国各城市质心与海岸线的距离、中国各区县质心与港口的最近距离以及中国各区县质心与海岸线的距离等指标。此外，还涉及中国各省距离海岸线的距离数据。港口等级划分参考了《全国沿海港口布局规划》，包括上海港、大连港等45个港口。数据集覆盖了全国31个省及直辖市，是研究地理、经济和规划等领域的宝贵资源。

为 Spring Web 应用提供 OAuth1 (a) 和 OAuth2 功能支持.zip

1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。

信号处理和通信系统模型中的模拟电路效应simulink.rar

1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。替换数据可以直接使用，注释清楚，适合新手

Python错误集合.doc

1-中国全球投资追踪相关数据（2005-2023年）-社科数据.zip

《中国全球投资追踪》数据库提供了2005至2023年间中国在全球范围内的投资和合同的详细记录，不包括债券。该数据库由中国海外直接投资（ODI）和建筑合同两大部分组成，覆盖全球多个国家和地区，涉及能源、交通、通信等多个行业领域。这份追踪数据集包含4142条样本，以面板数据格式呈现，主要指标包括年份、月份、投资方、投资量（单位：百万美元）、交易类型、行业、子行业、国家、地区、是否为“一带一路”倡议相关项目、绿地投资等。这份追踪数据是政策制定者、学者、企业和公众理解中国在全球经济中角色的重要资源，有助于分析中国的全球战略和经济目标。

原生js广告代码制作可展开关闭的页面上固定的图片对联广告代码.rar

1-中国各地区普通小学毕业生数（1999-2020年）-社科数据.zip

这组数据涵盖了1999至2020年间中国各地区普通小学毕业生的数量。它为我们提供了一个深入了解中国教育领域中普通小学阶段教育水平和教育资源分配情况的窗口。通过分析这些数据，可以为制定科学合理的教育政策提供依据，同时，通过比较不同城市的普通小学毕业生数，也能为城市规划和劳动力市场调查提供参考。数据来源于中国区域统计年鉴和中国各省市统计年鉴，包含了8472个样本，以面板数据的形式呈现。这些数据对于掌握中国教育态势具有重要的参考价值。

11顶1踩