资讯频道 → Web前端
阅读更多

11顶
1踩

Web前端

翻译新闻 关于MooTools你应该熟知的6个基本知识

2011-11-25 17:53 by 资深编辑 luiang1018 评论(6) 有12511人浏览
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实现图片放大镜的效果 这个案例注定又是一个吊炸天的分享，就不...

  • 松下FP-XH双PLC 10轴摆盘系统的模块化程序设计与维纶通触摸屏应用实例

    内容概要：本文详细介绍了基于松下FP-XH双PLC实现的10轴摆盘系统的设计与实现。该系统采用模块化编程方法，涵盖输出与调试、报警与通信、启动与复位三个主要部分。通过PC-LINK通信协议实现双PLC间的数据交互，并结合维纶通触摸屏提供直观的操作界面。具体代码展示了轴控制、报警处理、通信数据传输等功能的实现细节，强调了程序的易维护性和高效性。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是熟悉松下PLC和维纶通触摸屏的用户。 使用场景及目标：适用于需要高精度多轴联动控制的工业应用场景，如自动化生产线、机器人控制等。目标是提高设备的稳定性和效率，减少维护难度。 其他说明：文中提供了丰富的代码示例和实际操作经验，帮助读者更好地理解和应用所介绍的技术。此外，还讨论了一些优化技巧，如通信负载管理、异常处理机制等，有助于提升项目的可靠性和性能。

  • k近邻算法数据集(KNN数据集)

    k近邻算法数据集，包换鸢尾花和水果分类等

  • wmsj1111111111

    wmsj1111111111

  • COMSOL仿真：变压器电磁场建模与磁密分布分析

    内容概要：本文详细介绍了如何使用COMSOL Multiphysics软件进行变压器电磁场的仿真建模。主要内容涵盖了几何结构的创建、材料的选择与定义、物理场的设置以及仿真结果的分析。文中具体讲解了如何选择合适的铁磁材料（如软铁）、定义线圈材料（如铜），并设置了线圈的电流激励。通过仿真，可以得到变压器内部的磁密分布图和电路状态，从而优化变压器的设计，提升其效率和性能。 适合人群：从事电磁场仿真研究的技术人员、电力电子工程师、高校相关专业的学生。 使用场景及目标：适用于需要深入了解变压器工作原理的研究人员和技术人员，旨在通过仿真手段优化变压器设计，提高其性能和效率。 其他说明：文章提供了详细的MATLAB代码片段用于指导具体的仿真步骤，并分享了一些常见问题的解决方案，如边界条件设置不当、网格划分不合理等。同时，还强调了仿真结果的可视化展示方法，如磁密分布图和电路参数曲线的叠加显示。

  • LightCNN-v4 预训练模型

    https://github.com/AlfredXiangWu/LightCNN LightCNN-v4 预训练模型

  • COMSOL仿真中多孔介质湿空气传热传质的建模与优化

    内容概要：本文详细介绍了如何利用COMSOL进行多孔介质中湿空气的传热传质仿真。首先探讨了水蒸气扩散和液态水迁移的基本原理及其数学表达，如水蒸气扩散系数随温度变化以及多孔介质渗透率随孔隙率的变化规律。接着，通过具体案例展示了如何正确设置多孔介质参数，避免常见的仿真错误，如孔隙率和曲折因子的误设。文中还提供了多个实用技巧，包括求解器配置、边界条件设置、网格划分方法等，确保仿真的稳定性和准确性。此外，强调了多物理场耦合的重要性，特别是在处理温度场和湿度场之间的相互作用时。最后，通过实例验证了模型的有效性，并给出了提高仿真精度的具体建议。 适合人群：从事多物理场仿真、传热传质研究的专业人士，尤其是使用COMSOL进行相关仿真的工程师和技术人员。 使用场景及目标：适用于需要精确模拟湿空气中传热传质过程的研究项目，帮助研究人员更好地理解和预测复杂环境下（如地下室墙面渗水、地下粮仓通风）的物理现象，从而优化设计方案并解决实际工程问题。 其他说明：本文不仅提供具体的代码片段和参数设置指导，还分享了许多实践经验，有助于读者快速掌握COMSOL仿真技巧，避免常见错误，提高仿真效率和准确性。

  • 数据科学中非线性动力学的Python代码实现：相空间重构、分形分析与智能优化

    内容概要：本文详细介绍了用于非线性动力学分析的一系列Python代码实现，涵盖相空间重构、分形维数计算、随机微分方程求解以及智能优化算法。首先，通过互信息法和假近邻法进行相空间重构，确保时间序列数据能够在一个适当的坐标系中表示。其次，利用赫斯特指数和李雅普诺夫指数评估系统的分形特性和记忆性。然后，采用sdeint库解决带有噪声的随机微分方程，模拟复杂的动态系统。最后，比较并实现了粒子群优化（PSO）和遗传算法（GA），展示了它们在不同类型优化问题中的优势。 适合人群：具备一定编程基础的数据科学家、研究人员和技术爱好者，尤其是对非线性动力学感兴趣的读者。 使用场景及目标：适用于需要处理复杂时序数据的研究项目，如金融市场的波动分析、气象预报、生物信号处理等。目标是帮助读者掌握非线性动力学的基本概念及其Python实现，从而更好地理解和预测复杂系统的动态行为。 其他说明：文中提供了大量具体的Python代码片段，便于读者直接应用于实际问题中。同时强调了参数选择的重要性，并给出了多个实用技巧，如互信息法找延迟、假近邻法确定嵌入维数等。

  • texlive-cm-super-7:20180414-23.el8.x64-86.rpm.tar.gz

    1、文件说明： Centos8操作系统texlive-cm-super-7:20180414-23.el8.rpm以及相关依赖，全打包为一个tar.gz压缩包 2、安装指令： #Step1、解压 tar -zxvf texlive-cm-super-7:20180414-23.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm

  • 软件测试领域经典面试题汇总与解答

    内容概要：文档《软件测试经典面试题.docx》汇总了软件测试领域的常见面试题及其参考答案。涵盖的主题包括但不限于兼容性测试、性能测试、单元测试、集成测试、系统测试、Bug管理、测试工具（如Bugzilla、LoadRunner、QTP）、测试用例设计、测试流程、测试类型的区别与联系、测试中的沟通技巧、测试环境搭建、网络与操作系统基础知识等。文档不仅涉及具体的测试技术和工具，还包括了对测试人员职业发展的探讨，如测试工程师应具备的素质、职业规划、如何处理与开发人员的关系等。 适用人群：具备一定编程基础，尤其是有志于从事软件测试工作的人员，以及希望提升自身测试技能的专业人士。 使用场景及目标：①帮助求职者准备软件测试相关岗位的面试；②为在职测试工程师提供技术参考和职业发展建议；③为项目经理或HR提供招聘软件测试人员时的面试题目参考；④帮助理解软件测试在软件开发中的重要性及其实现方法。 阅读建议：本文内容详实，涵盖面广，建议读者根据自身需求选择性阅读。对于面试准备，重点关注面试题及其解答思路；对于技术提升，深入理解测试工具和方法；对于职业发展，思考测试人员所需素质及职业规划。同时，结合实际工作中的案例进行理解和实践，有助于更好地掌握和应用这些知识。

  • 基于信捷XC PLC的双摆头双滚头磨床自动化控制系统开发与应用

    内容概要：本文详细介绍了基于信捷XC PLC和显控触摸屏的双摆头双滚头磨床自动化控制系统的设计与实现。系统采用Modbus RTU通讯协议，通过PLC控制四台变频器，实现磨床的高效稳定运行。主要内容涵盖系统总体架构、PLC配置与通讯、变频器控制逻辑、程序功能模块以及调试与优化等方面。文中还分享了一些实际开发中的技巧和经验，如变频器的负载电流用于软限位检测、通讯超时处理机制等。 适合人群：从事工业自动化控制系统的工程师和技术人员，尤其是熟悉PLC编程和Modbus通讯协议的专业人士。 使用场景及目标：适用于需要提高双摆头双滚头磨床生产效率和稳定性的制造企业。目标是通过自动化控制减少人工干预，提升设备性能和可靠性。 其他说明：文中提供的代码示例和调试经验对于类似设备的智能化改造具有重要参考价值。

Global site tag (gtag.js) - Google Analytics