关于MooTools你应该熟知的6个基本知识
2014-03-10 20:26
309 查看
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;
}
最后
关于MooTools框架要学习的还有很多,但在使用MooTools创建类及它的其他高级功能前请务必先弄请上述这些,因为它们都是基础。欢迎发表任何评论。
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;
}
最后
关于MooTools框架要学习的还有很多,但在使用MooTools创建类及它的其他高级功能前请务必先弄请上述这些,因为它们都是基础。欢迎发表任何评论。
相关文章推荐
- 关于MooTools你应该熟知的6个基本知识
- 关于linux图形界面编程基本知识 - 技术文档 - 程序开发 Linux时代 - 开源、... (转载)
- 关于Linux图形界面的基本知识
- 关于微信小程序的基本知识
- 每个Web开发者都应该知道的关于URL编码的知识
- 关于 frame的一些基本知识 --转(经典推荐)
- 关于数据库索引的基本知识
- C 语言 关于 宏 中的 # 和 ## 基本知识
- 通信设备硬件工程师应该具备的基本能力和知识-1
- 关于 frame的一些基本知识
- 【面经分享】想进外企你应该知道的七大基本面试知识
- 关于Linux图形界面的基本知识(转)!
- 关于计算机网络的基本知识整理
- 网上查了点关于windows注册表的知识,发现基本名词没理解好,于是整理这篇笔记(可能个别地方不准确,先这么理解吧),有了这个理解,再去看网上的文章,就差不读了
- 一个通信设备硬件工程师应该具备的六大基本能力和知识(转)
- 学习计算机专业最基本应该具备那些知识?
- 关于linux图形界面的基本知识
- 关于向量的点乘和叉乘的基本知识
- 通信设备硬件工程师应该具备的基本能力和知识-1
- 关于 frame的一些基本知识