mootools教程2
mootools教程(二)
2007-10-03 17:21
mootools【六】- Event篇
mootools中定义了一个Event类，它提供了对原始window的事件对象event的扩展，使用的时候，可以 把原来的event对象作为Event的构造方法参数传入:
var event = new Event(event);
这样，返回的event就包含了所有mootools经过扩展的功能，具体扩展的属性和方法如下：
================================================================
属性：
shift - 当触发的事件是键盘按键事件时，判断按下的按键是否是shift键
$('myLink').onkeydown = function(event){
var event = new Event(event); //扩展了的event
alert(event.shift); //如果按下的按键是shift,则alert结果为true
};
[control,alt,meta用法和shift相同。]
code - 当触发的事件是键盘按键事件时，按下键的keycode
page.x - 鼠标事件触发时，鼠标相对于整个窗体的x
page.y - 鼠标事件触发时，鼠标相对于整个窗体的y
client.x - 鼠标事件触发时，鼠标相对于当前视野的y
client.y - 鼠标事件触发时，鼠标相对于当前视野的y
(一般情况下，client.x,client.y效果和page.y，page.y一样；但当窗体出现滚动条的时候，两者效果就有差别了。)
$('myInput').addEvent('click',function(event){
var event = new Event(event);
alert(event.page.y + "||" + event.client.y);
});
key - 当触发的事件是键盘按键事件时，按下按键的名字，如："enter","esc"等等。
target - 发生事件的元素。
relatedTarget - 发生mouseover和mouseout事件时的元素对象的参照对象。
================================================================
方法：stop
作用：停止事件的执行
方法：stopPropagation
作用：停止事件的冒泡传递
方法：preventDefault
作用：停止事件的默认动作
由于Event的引进，mootools又给Function扩展了一个方法：
bindWithEvent
它和Function的bindAsEventListener方法用法基本相同，不一样的是，bindAsEventListener方法传递到事件监听器中的是原来的event对象，而bindWithEvent则是Event的实例对象。
mootools的学习资源
网上看到有朋友搜集了很多关于mootools的资料链接，非常好，感谢。
一.教程/文章/代码实例：
http://clientside.cnet.com/wiki/mootorial/ --- The Mootorial：比较完整的mootools教程
http://solutoire.com/2007/02/16/mootools-ajax-xhr-classes/ --- ajax 和 XHR
http://solutoire.com/2007/01/31/mootools-10-whats-new/ --- Mootools 1.0: What’s new
"http://solutoire.com/2006/12/25/porting-prototype-enumerable-functions-to-mootools-array-objects/ --- 将 Prototype的Enumerable移植到Mootools Array
http://www.coryhudson.com/blog/2006/09/12/extending-objects-and-classes-with-mootools/ --- 用mootools扩展 Objects 和 Classes
http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/ --- Mootools中有用的“Utility”函数
http://www.coryhudson.com/blog/2006/09/26/extending-dom-nodes-with-mootools/ --- 用 Mootools 扩展 DOM Nodes
http://www.snook.ca/archives/javascript/mootools_drag_a/ --- Mootools 拖拽实例
http://smoothgallery.jondesign.net/getting-started --- 在你的网站上创建一个画廊或幻灯
http://www.chromasynthetic.com/blog/wp-content/uploads/2006/09/mootools1.html --- 简单的导航条实例
http://www.chrisesler.com/mootools/mootools-dragwindow.html --- 可拖动的窗口实例（实际上是可拖动的div）
http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php --- 表格行列高亮实例
http://techblog.billkrueger.com/2006/10/11/mootools-sortable-list-example/ --- 可排序列表实例
http://www.digitalknk.com/2006/10/10/final-class-project-complete/ --- 可折叠菜单的视频教程
http://solutoire.com/2007/01/16/mootools-playing-with-height-transitions/ --- 非常好的tab菜单教程（Mootools: playing with height-transitions）
http://solutoire.com/2006/11/29/mootools-the-ajax-class/ --- 关于ajax类
http://www.thepcspy.com/articles/programming/ajax_search_with_ms_live_and_mootools --- 用Mootools实现基于ajax的Ms live查询
http://solutoire.com/2006/11/29/mootools-horizontal-accordions-explained/ --- 又一个可折叠菜单
http://solutoire.com/2006/12/18/mootools-json-explained/ --- Json模块与php教程
http://dev.digitarald.de/tile.html --- 移动背景实例
http://www.dotes.com.br/mootools/FlyOverBackground.html --- 移动背景实例（fixed for ie）
http://dev.digitarald.de/ghostdrag.html --- 拖拽实例
http://dev.digitarald.de/tabs.html --- tab实例
http://beautyindesign.com/tutorial/free_series_mootools_for_the_rest_of_us.php --- 5节课的Mootools教程：MooTools for the Rest of Us
http://www.chrisesler.com/mootools/fisheye/index.php --- Mac os dock样式的菜单
二. 插件
http://smoothgallery.jondesign.net --- JonDesign的SmoothGallery：画廊、幻灯和展厅
http://www.electricprism.com/aeron/slideshow/ --- 幻灯
http://smoothslideshow.jondesign.net --- JonDesign的幻灯类库
http://solutoire.com/2006/11/29/fxfont-mootools-and-font-resizing/ --- Fx.Font 自动改变文字大小
http://www.brunofigueiredo.com/archive/2006/09/14/88.aspx --- moobox：实现简单的LightBox效果
http://www.brunofigueiredo.com/archive/2006/09/21/103.aspx --- 反射效果
http://www.brunofigueiredo.com/archive/2006/09/15/93.aspx --- 另类图片标签
http://www.brunofigueiredo.com/code/jsShadowReflection/extension_1.htm --- efxFactory 0.1 BETA:阴影和反射效果库
http://inviz.ru/moo/transcorners/ --- 圆角效果
http://www.digitalia.be/software/slimbox --- Slimbox：完整的Lightbox克隆，只有7k
http://www.digitalia.be/software/reflectionjs-for-mootools --- 反射 Reflection.js
http://nhatanh.voxfamilyvn.com/moo/slider.html --- Moo.Slider：滑动器
http://nhatanh.voxfamilyvn.com/moo/calendar.html --- Moo.Calendar：日历
http://og5.net/~wusch/?cat=javascript --- ie6的png透明插件
http://www.clanccc.co.uk/moo/sortlist.html --- 嵌入式可排序列表
http://www.blackmac.de/archives/44-Mootools-AJAX-timeout.html --- AjaxPlus：为AJAX增加超时事件
mootools版本的lightbox实现
最近对mootools非常感兴趣。如别人评价它一样：轻盈，又不失强大。同时，它的源代码的条理也非常清晰。慢慢一边阅读它的源代码一边尝试它提供的功能是学习它的一个好途径。
从网上找到了基于mootools实现的LightBox组件(一个非常酷的图片浏览组件)，从我上一篇blog中有相关实现这个程序的官方链接(Slimbox),不过这个网站的.be域名我们不通过代理的话访问不了。
我找到的这个mootools的lightbox实现是基于较早期的mootools版本的，和现在的正式发布版本mootools1.0.0有一点点不兼容，我把它修改了下，让它里面的方法基于mootools1.0.0里提供的api了。
可以从我这个链接下载我修改过的Demo：
http://www.live-share.com/files/200713/moobox.rar.html
mootools【七】- mootools的构造应用的基础设施Common.js
正因为mootools是基于OO的思想，所以，在mootools自身提供的功能中，充分使用了OO的理念--继承和实现.
mootools中提供一组 基础功能类：Chain,Events,Options,Group，然后我们可以通过implement他们来在我们的类中实现它们所提供的功能。mootools自己提供的Ajax, XHR和Fx.Base类就实现了这些基础功能类。
类：Chain
作用：这里Chain类把function组织成一个链式结构。
它提供了三个方法：
chain - 添加一个函数到链中
callChain - 执行链中第一个函数，然后删除(原来链中第二个函数将变为新的链首)
clearChain - 清除链中所有函数
var c = new Chain().chain(function(){
alert('Func A!');
}).chain(function(){
alert('Func B!');
}).chain(function(){
alert('Func C!');
});
c.callChain(); //"Func A!"
c.callChain(); //"Func B!"
c.callChain(); //"Func C!"
类：Events
作用：通俗的来讲，它其实像是一个事件管理器(各人觉得大多数情况下应该是自定义事件)。别的类可以实现它来进行自己的事件管理。
它同样提供了三个方法：
addEvent - 向管理器中添加指定事件的监听器
fireEvent - 触发执行指定事件下的所有监听器方法
removeEvent -
var evts = new Events();
var fa = function(e){
alert('aaaaaaa');
};
var fb = function(e){
alert('bbbbbbb');
};
evts.addEvent('onMyEvent', fa).addEvent('myEvent', fb);
evts.fireEvent('onMyEvent'); //先alert出"aaaaaaa",然后alert出"bbbbbbb"
evts.removeEvent('onMyEvent',fa);
evts.fireEvent('onMyEvent'); //alert 出"bbbbbbb"
类：Options
作用：为实现该类的类提供一个可选参数管理器
它提供了一个方法：
setOptions - 设置类的this.options,该方法的第一个参数是要给出的默认参数列表，第二个参数是可提供用户输入的参数列表。如果实现同时实现Options类和Events类，则参数列表中有以on开头(/^on[A-Z]/)的参数名，则自动会把这些参数加入到Events提供的事件管理器中。
var MyClass = new Class({
initialize: function(options){
this.setOptions({
width: '100px',
height: '200px',
onMyEvent: Class.empty
},options);
}
});
MyClass.implement(new Options()); //自定义类实现Options
MyClass.implement(new Events()); //自定义类实现Events
//实例化MyClass
var c = new MyClass({
deep: '100px',
onMyEvent: function(){alert('option[deep]>:' + this.options['deep']);}
});
c.fireEvent('onMyEvent'); //alert出"option[deep]:100px"
类：Group
作用：把元素分组，然后可以为这些组进行添加事件监听器，这些“组监听器”的触发时机是这样的：当组里面的所有元素都触发过指定的事件后，"组监听器"就开始执行。比如有3个按钮A,B,C组成一个Group,然后为这个Group添加一个click事件的监听器方法，则，当你分别去按这3个按钮，不分次序，不分按的次数（比如A按了1次，B按了2次,然后再按C）,当按最后一个按钮时候(比如已经按过了A和B，现在按下C)，那个“组监听器”就被执行了。
<a href="#" id="link1" >AAA</a>
<a href="#" id="link2" >BBB</a>
<a href="#" id="link3" >CCC</a>
$('link1').addEvent('click',function(){alert('AAA');});
$('link2').addEvent('click',function(){alert('BBB');});
$('link3').addEvent('click',function(){alert('CCC');});
var g = new Group($('link1'),$('link2'),$('link3'));
g.addEvent('click', function(){
alert('group event');
});
//当你按照类似如下规律点击链接：
先点击link1：alert出"AAA"
再点击link2：alert出"BBB"
最后点击link3：先alert出"group event"，再alert出"CCC"
一般情况下，Chain,Events和Options都不会单独使用，都会被别的类implement，来为这些类提供功能增强。
mootools【八】 - Css查询支持之Dom.js
mootools支持通过Css选择器语法来获取元素节点，以最少的代码做最多的事情。在Dom.js中提供了实现这些功能的工具方法以及元素级的扩展。
工具方法：$E
作用：按照css选择器语法获取第一个符合规则的元素
参数：
selector - css选择器,如a,#my_div等
filter - 可选，过滤范围，默认是document
<div id="myDiv">
<a href="#" id="link1">AAA</a>
<a href="#" id="link2">BBB</a>
<a href="#" id="link3">CCC</a>
</div>
$E('a','myDiv'); //获取的是id为link1的超链接元素
工具方法：$ES
作用：按照css选择器语法获取所有符合规则的元素
参数：
selector - css选择器,如a,#my_div等
filter - 可选，过滤范围，默认是document
<div id="myDiv">
<a href="#" id="link1">AAA</a>
<a href="#" id="link2">BBB</a>
<a href="#" id="link3">CCC</a>
</div>
$ES('a','myDiv'); //获取所有3个链接元素
-------------------------------------------------------------------------------------------------------------------------
对Element的扩展方法：
方法：getElements
作用：获取当前元素下符合给出css选择器的元素
<div id="myDiv">
<a href="#" id="link1">AAA</a>
<a href="#" id="link2">BBB</a>
<a href="#" id="link3">CCC</a>
</div>
$('myDiv').getElements('a'); //获取myDiv下的3个链接
方法：getElementById
作用：如同document.getElementById方法一样，该方法也是按照指定id来获取元素，只不过是再当前元素之下的范围内查找。
$('myDiv').getElementById('link2');
方法：getElement
作用：功能如同$E,只不过查找范围是当前元素。获取当前元素下符合指定选择器的第一个元素。
$('myDiv').getElement('a');
方法：getElementsBySelector
作用：功能和getElements大致相同，并且支持css选择器中的逗号。该方法使用的时候可以用$$来替代。
$('myDiv').getElementsBySelector('#link1,#link2');
========================================================================
document又在以上扩展的基础上被扩展出一个方法： getElementsByClassName
document.getElementsByClassName('my_clazz');
标准javascript中只有document有getElementsByTagName。经过扩展，mootools又让每个Element元素可以使用 getElementsByTagName方法：
$('myDiv').getElementsByTagName('a');
这部分的扩展已经让mootools的对象获取方式足够方便和强大了。非常的棒！
mootools【九】- 工具类Hash和Color
Hash数据结构，我们通常用来存放键值对。在javascript中，没有规范的Hash的实现，一般，我们都会通过包装对象来模拟实现这样的Hash,来实现规范化的Hash对象操作。
另外，颜色代码的操作在做UI的时候很频繁，尤其是要做十分绚丽的效果的时候，需要对颜色代码做很多的计算，mootools在这个方面做了比较多的工作，通过对String,Array的扩展，以及提供的Color类，我们随时可以对颜色数据进行转换和计算。
类： Hash
方法：
构造方法 - 传入一个包含键值对的object
get - 按键取值
hasKey - 判断是否有指定的键
set - 把键值对存放入Hash
remove - 删除指定键的键值对
each - 用法和Array的each相似，每个键值对的通过each中指定的函数的第一个参数(值)和第二个参数(键)传入。
extend - 把一个包含键值对的对象合并到当前Hash中，相同键的值将被新的值覆盖。
empty - 这个方法的功能在mootools1.0和1.1dev版本中是完全不一样的，1.0中是判断Hash中是否已经没有键值对，而在1.1dev中是清空Hash中的所有键值对，请注意区别。
keys - 获取Hash中的所有键
values - 获取Hash中的所有值
var hash = new Hash({
one: 1,
two: 2,
three: 3
});
var one = hash.get('one');
var hk = hash.hasKey('three');
hash.set('four',4);
hash.each(function(v,k){
alert(k+'-'+v);
});
创建Hash的快捷方法：
$H
$H({a:1,b:2})
------------------------------------------------------------------------------------------------------------------------------------------------
类：Color
构造方法参数：
color - 代表颜色的代码，可以是十六进制代码，代表RGB或HSB代码的数组
type - 可选，用于明确指定代码的类型，有rgb,hsb,hex。当你要创建hsb代码或hex数组形式代码的时候，需要明确指定。
作用：颜色对象，包含了很多颜色管理方法。
var black = new Color('#000');
var purple = new Color([255,0,255]);
方法：mix
作用： 把两种或更多的颜色和当前颜色混合
参数：
参数个数不定，可以把多个颜色代码混合，当最后一个参数是一个数字的时候，这个数字被用作每次混合时取新颜色的百分量。
var darkpurple = black.mix('#fff', purple, 10);
$('myDiv').setStyle('background-color', darkpurple);
方法：invert
作用：取当前颜色的反色
var c = new Color('#FF9900').invert();
$('myDiv').setStyle('background-color',c);
方法：setHue
作用：设置颜色的色相
var c = new Color('#FF9900').setHue(10);
$('myDiv').setStyle('background-color',c);
方法：setSaturation
作用：设置色饱和度
var c = new Color('#FF9900').setSaturation(50);
$('myDiv').setStyle('background-color',c);
方法：setBrightness
作用：设置色彩亮度
var c = new Color('#FF9900').setBrightness(10);
$('myDiv').setStyle('background-color',c);
创建Color的两个快捷工具方法：
$RGB(r, g, b) - 建立RGB模式的Color
$HSB(h, s, b) - 建立HSB模式的Color
如果加载了Color.js，那么Array还会被扩展两个方法：
rgbToHsb - 当前数组前三个元素将被作为rgb值,转换为hsb值代表的数组
hsbToRgb - 和rgbToHsb 相反的功能
mootools【十】- window的扩展
浏览器的window对象本身就提供了我们很多的对浏览器本身属性的获取或设置的方法，但是我们也知道，由于各大浏览器之间对标准的实现不统一，导致很多方法功能上有所出入，mootools为我们统一了我们最常用的一些方法：
mootools的Window.Base.js里面，主要实现了对DOM树创建完成的事件监听。以前，我们可能经常把javascript代码写在html代码的最后面获者加上defer属性，以保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话，javascript将获取不到目标元素而出错)，但是，这种方式看起来还是太杂乱，保险系数也不是最高的。其实像ie的话可以根据document的readyState属性来判断文档树的建立状态，而有些浏览器在创建文档树之后会触发onload事件，mootools把这些都包装了起来，形成一个统一的自定义事件"domready"，你可以像添加其他监听器一样来为window添加这个domready事件的监听器方法：
window.addEvent('domready', function(){
alert('the dom is ready');
});
另外，有个快捷方法，效果和以上相同：
window.onDomReady(function(e){
alert('dom is ready!!!');
});
mootools的Window.Size.js中呢，提供了一系列和浏览器window的尺寸有关的工具方法，
window的扩展方法：
方法： getWidth - 获取window的当前高度(不包含滚动条的滚动量，即当前能见视野高度)
方法：getHeight - 获取window的当前宽度(不包含滚动条的滚动量，即当前能见视野宽度)
方法：getScrollWidth - 获取window的当前高度(包含了整个内容区域，即可滚动部分也计算在内)
方法：getScrollHeight - 获取window的当前宽度(包含了整个内容区域，即可滚动部分也计算在内)
方法：getScrollLeft - 获取window滚动的水平偏移量
方法：getScrollTop - 获取window滚动的垂直偏移量
方法：getSize - 获取window上面几个方法的提供的数据，格式：
{
'size': {'x': this.getWidth(), 'y': this.getHeight()},
'scrollSize': {'x': this.getScrollWidth(), 'y': this.getScrollHeight()},
'scroll': {'x': this.getScrollLeft(), 'y': this.getScrollTop()}
}
mootools【十一】- 多彩的开始
mootools中集成了一些非常好用的界面组件， 也提供了非常好用的界面效果工具类，用这些工具做界面效果，感觉上比用Prototype+Scriptaculous开发更方便，效果也更加的顺畅平滑。
mootools的界面库Moo.Fx的设计十分的讲究OO原则，通过对提供了基本功能的基类的继承，扩展出了不同功能的工具类和组件类。Fx.Base就是这样一个基础类，它本身实现了Events,Chain,Options三个类，它包含了界面效果的最基本的动作和属性：
构造方法的可选属性：
------------------------------------------------------------------------------------------------------------------------------
onStart - 效果开始前执行的方法，默认是一个空的function。你可以指定你的function。
onComplete - 完成效果后执行的方法，默认是一个空的function。你可以指定你的function。
onCancel - 中断效果后执行的方法，默认是一个空的function。你可以指定你的function。
transition - 效果的过渡变换所使用的方程，用来描述效果的变化规律。你可以在Fx.Transitions类中找到其他的方程，默认使用的是Fx.Transitions.sineInOut(即正弦)
duration - 变化频率，毫秒。默认为500。
unit - 变化量的单位。默认是'px',你可以指定如'em','%'之类。
wait - true/false。指定在执行下一个过渡效果之前是否等待当前的过渡效果执行结束。默认为true
fps - 帧频。即每秒所执行的变换次数。默认为30帧/秒。
------------------------------------------------------------------------------------------------------------------------------
方法：set
作用：不经过过渡变换效果，直接设置为指定的值
var myFx = new Fx.Style('myElement', 'opacity').set(0);
方法：start
作用：执行效果，让指定的开始值过渡变换到指定的结束值
var myFx = new Fx.Style('myElement', 'opacity').start(0,1);
方法：stop
作用：中断效果的执行，如果指定了参数为false,则会执行onCancel指定的方法。
最后，如果要查看有哪些变换方程可以选用，可以看Fx.Transitions.js里的Fx.Transitions类，里面提供了非常之多的变换方程，具体的效果差别，自己去一个个去试试看吧。
mootools【十二】- 多彩的开始2
这些天有点事情比较忙，几天没更新了Blog了。不能让这个mootools的学习文章半途而废了。
上回说到mootools的Fx.Base类，它是mootools效果库Fx的基础，而我们平时会使用最频繁的，就是Fx.Style类，它是直接继承了Fx.Base类的。这个效果类非常强大，基本上可以实现对CSS样式中任何一个属性的过渡变换。
Fx.Base中提供的方法在Fx.Style中都能用，用法是相同的，其他扩展的方法如下：
方法：hide
作用：如同调用Fx.Base的set方法，并且参数为0（即set(0)）,当效果作用在opacity,或者width,height(overflow需要是hidden)的时候,调用这个方法的效果是隐藏元素。
var myFx = $('myDiv').effect('width', {duration: 1000});
myFx.hide();
方法：start
作用：在两个区间之间进行过渡变换，和Fx.Base的start用法一样。
var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
marginChange.start(10); //从myElement当前的margin-top值过渡到10
marginChange.start(1,20); //myElement的margin-top值从1过渡到20
由于Fx.Style的引入，Element又被扩展了一个实现效果的快捷方法： effect
具体用法如下：
var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear});
myEffect.start(10, 100);
想实现同时进行多个效果怎么做？方便，Fx.Styles就是提供这样功能的一个类，它也是直接继承了Fx.Base的类，你可以像这样来使用它：
var myFx = new Fx.Styles('myDiv', {duration: 1000});
myFx.start({
'width':[100,300],
'height':[100,200]
});
十分简单明了。
同样，Effect由此多了一个effects快捷方法，可以这样使用：
var myFxs= $(myElement).effects({duration: 1000, transition: Fx.Transitions.sineInOut});
myFxs.start({
'height': [10, 100],
'width': [900, 300]
});
另外，除了上面的两个类之外，还有一个可以用来作转换效果的类：Fx.Elements，这个类可以按照指定的元素顺序来执行指定的效果，就像这样：
var myElementsEffects = new Fx.Elements($$('a'));
myElementsEffects.start({
'0': { //对第一个元素执行opacity和width的过渡变化
'opacity': [0,1],
width': [100,200]
},
'1': { //对第二个元素执行opacity过渡变换
'opacity': [0.2, 0.5]
}
});
差不多就这样了，不过别看就这么些东西，但是它们提供的功能足够强大，好好使用他们吧:)。
mootools1.1正式发布了,新特性一览
今天上了下mootools的主站，发现1.1 released。
看了一下，主要的新特性如下：
一.更快的速度,兼容性和全方位优化
mootools在速度上面进行了很大的优化，比较突出的是在CSS选择器方面(不仅仅在实现逻辑方面进行优化，XPATH被在所有支持的浏览器中启用 )
二.更加新颖的事件系统
1.自定义事件：提供了一套api来提供定义自定义事件。比如mootools自带的mouseenter,mouseleave,domready就是这类自定义事件。
2.Element::cloneEvents提供了事件的复制
如:note.clone().cloneEvents(note); //复制note对象并且把原来note对象上的事件监听也复制过去
三.提供更多的Element的方法及新的Element构造方式。
例如新的构造Elment如下：
var note = new Element('div', {
'id': 'note',
'class': 'note',
'styles': {
'left': 15,
'top': 15
},
'events': {
'click': noteConfirm,
'mouseover': noteShowMore
}
});
对比原先的功能对等的构造方式：
var note = new Element('div').addClass('note').setProperty('id', 'note').setStyles({
'left': 15,
'top': 15
}).addEvents({
'click': noteConfirm,
'mouseover': noteShowMore
});
*新方法：
Element::set - 功能如同新的构造方法的第二个参数一样，可以给Element添加各种属性
Element::hasChild - 判断是否内部含有所给出的子元素
*改进的方法：
Element::setStyle - 对于没有明确给出单位的数值型值，将默认为单位是'px'
Element::adopt - 新版本支持多个元素（这个非常不错，很方便）
四.元素过滤器
利用新的元素过滤器，可以对使用$$得到的元素进行进一步的归纳。这些将不需要Element.Selectors，而只使用原生的tag名选择过滤方法(应该速度上快一点吧)
一下例子中将不会用到Element.Selectors:
$('div').filterByClass('myClass');
而这个会用到：
$('div.myClass');
更真实的例子：
$('myElement').getChildren().filterByClass('myClass');
五.更加完善的Ajax功能
基本的Ajax实现逻辑从Ajax类中转入到了XHR类中了。
其他提供的一些更加强大的方法：
Ajax::cancel - 可中断正在执行的请求。如果启用了‘autoCancel’选项，则当发出新的请求的时候自动中断当前请求
Ajax::evalScripts - 加强了全局的eval及自动执行Content-Type为javascript的返回内容
postBody选项更名为data,因为现在XHR可以分别接受get和post方法提交的数据
六.Hash.Cookie和Group
Hash.Cookie是一个扩展的Hash类，它可以自动或手工的保存或加载在Cookie中以JSON格式存储的数据
Group - 可以对元素和事件进行分组处理的类(用法可以参见我前面的文章)
七.工具集
1）新或增强的工具方法：
$defined , $time , $type
2）新的Array方法：
Array::getLast , Array::getRandom , Array::merge ,Array::include
3)新的String方法：
String::contains , String::escapeRegExp
4)新的Number方法：
Number::times(好Ruby啊!) , Number::limit , Number::round
5)浏览器检测
加入了window.webkit419 , window.webkit420，而window.khtml已经被作为过期api
八.增强的垃圾收集机制
九.其他的增强
1）Accordion::addSection可以用来在向一个已经创建的Accordion中添加更多的元素
2）Sortables变得更加稳定，以及不依赖于Drag.Move
3）新的Fx.Transtions，它已经变得更加的可配置
4）Fx.Slide允许border和margin
5）Element::getStyle现在已经全面支持padding/margin/border(包括针对IE的width/height的修正)
十.变更的API
一些过期的api在v1.1中还是能用，但是，在v1.2中将作删除。
1.Ajax的postBody变更为data
2.Array::test被Array::contains替代
3.Object.extend,Object.merge和Object.Native现在已经推荐使用$extend, $merge,$native
4.Window.onDomReady被作为过期API,取代它的是'domready'这个自定义事件，如：
window.addEvent('domready', fn).
5.Hash::each的功能行为已经变更成和$each所提供的功能等价的行为。
6.Hash::empty的功能变为清空所有hash键值(原来的功能是判断hash是否为空,现在等价的功能由Hash::length提供)。
7.window.khtml由window.webkit取代
2007-10-03 17:21
mootools【六】- Event篇
mootools中定义了一个Event类，它提供了对原始window的事件对象event的扩展，使用的时候，可以 把原来的event对象作为Event的构造方法参数传入:
var event = new Event(event);
这样，返回的event就包含了所有mootools经过扩展的功能，具体扩展的属性和方法如下：
================================================================
属性：
shift - 当触发的事件是键盘按键事件时，判断按下的按键是否是shift键
$('myLink').onkeydown = function(event){
var event = new Event(event); //扩展了的event
alert(event.shift); //如果按下的按键是shift,则alert结果为true
};
[control,alt,meta用法和shift相同。]
code - 当触发的事件是键盘按键事件时，按下键的keycode
page.x - 鼠标事件触发时，鼠标相对于整个窗体的x
page.y - 鼠标事件触发时，鼠标相对于整个窗体的y
client.x - 鼠标事件触发时，鼠标相对于当前视野的y
client.y - 鼠标事件触发时，鼠标相对于当前视野的y
(一般情况下，client.x,client.y效果和page.y，page.y一样；但当窗体出现滚动条的时候，两者效果就有差别了。)
$('myInput').addEvent('click',function(event){
var event = new Event(event);
alert(event.page.y + "||" + event.client.y);
});
key - 当触发的事件是键盘按键事件时，按下按键的名字，如："enter","esc"等等。
target - 发生事件的元素。
relatedTarget - 发生mouseover和mouseout事件时的元素对象的参照对象。
================================================================
方法：stop
作用：停止事件的执行
方法：stopPropagation
作用：停止事件的冒泡传递
方法：preventDefault
作用：停止事件的默认动作
由于Event的引进，mootools又给Function扩展了一个方法：
bindWithEvent
它和Function的bindAsEventListener方法用法基本相同，不一样的是，bindAsEventListener方法传递到事件监听器中的是原来的event对象，而bindWithEvent则是Event的实例对象。
mootools的学习资源
网上看到有朋友搜集了很多关于mootools的资料链接，非常好，感谢。
一.教程/文章/代码实例：
http://clientside.cnet.com/wiki/mootorial/ --- The Mootorial：比较完整的mootools教程
http://solutoire.com/2007/02/16/mootools-ajax-xhr-classes/ --- ajax 和 XHR
http://solutoire.com/2007/01/31/mootools-10-whats-new/ --- Mootools 1.0: What’s new
"http://solutoire.com/2006/12/25/porting-prototype-enumerable-functions-to-mootools-array-objects/ --- 将 Prototype的Enumerable移植到Mootools Array
http://www.coryhudson.com/blog/2006/09/12/extending-objects-and-classes-with-mootools/ --- 用mootools扩展 Objects 和 Classes
http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/ --- Mootools中有用的“Utility”函数
http://www.coryhudson.com/blog/2006/09/26/extending-dom-nodes-with-mootools/ --- 用 Mootools 扩展 DOM Nodes
http://www.snook.ca/archives/javascript/mootools_drag_a/ --- Mootools 拖拽实例
http://smoothgallery.jondesign.net/getting-started --- 在你的网站上创建一个画廊或幻灯
http://www.chromasynthetic.com/blog/wp-content/uploads/2006/09/mootools1.html --- 简单的导航条实例
http://www.chrisesler.com/mootools/mootools-dragwindow.html --- 可拖动的窗口实例（实际上是可拖动的div）
http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php --- 表格行列高亮实例
http://techblog.billkrueger.com/2006/10/11/mootools-sortable-list-example/ --- 可排序列表实例
http://www.digitalknk.com/2006/10/10/final-class-project-complete/ --- 可折叠菜单的视频教程
http://solutoire.com/2007/01/16/mootools-playing-with-height-transitions/ --- 非常好的tab菜单教程（Mootools: playing with height-transitions）
http://solutoire.com/2006/11/29/mootools-the-ajax-class/ --- 关于ajax类
http://www.thepcspy.com/articles/programming/ajax_search_with_ms_live_and_mootools --- 用Mootools实现基于ajax的Ms live查询
http://solutoire.com/2006/11/29/mootools-horizontal-accordions-explained/ --- 又一个可折叠菜单
http://solutoire.com/2006/12/18/mootools-json-explained/ --- Json模块与php教程
http://dev.digitarald.de/tile.html --- 移动背景实例
http://www.dotes.com.br/mootools/FlyOverBackground.html --- 移动背景实例（fixed for ie）
http://dev.digitarald.de/ghostdrag.html --- 拖拽实例
http://dev.digitarald.de/tabs.html --- tab实例
http://beautyindesign.com/tutorial/free_series_mootools_for_the_rest_of_us.php --- 5节课的Mootools教程：MooTools for the Rest of Us
http://www.chrisesler.com/mootools/fisheye/index.php --- Mac os dock样式的菜单
二. 插件
http://smoothgallery.jondesign.net --- JonDesign的SmoothGallery：画廊、幻灯和展厅
http://www.electricprism.com/aeron/slideshow/ --- 幻灯
http://smoothslideshow.jondesign.net --- JonDesign的幻灯类库
http://solutoire.com/2006/11/29/fxfont-mootools-and-font-resizing/ --- Fx.Font 自动改变文字大小
http://www.brunofigueiredo.com/archive/2006/09/14/88.aspx --- moobox：实现简单的LightBox效果
http://www.brunofigueiredo.com/archive/2006/09/21/103.aspx --- 反射效果
http://www.brunofigueiredo.com/archive/2006/09/15/93.aspx --- 另类图片标签
http://www.brunofigueiredo.com/code/jsShadowReflection/extension_1.htm --- efxFactory 0.1 BETA:阴影和反射效果库
http://inviz.ru/moo/transcorners/ --- 圆角效果
http://www.digitalia.be/software/slimbox --- Slimbox：完整的Lightbox克隆，只有7k
http://www.digitalia.be/software/reflectionjs-for-mootools --- 反射 Reflection.js
http://nhatanh.voxfamilyvn.com/moo/slider.html --- Moo.Slider：滑动器
http://nhatanh.voxfamilyvn.com/moo/calendar.html --- Moo.Calendar：日历
http://og5.net/~wusch/?cat=javascript --- ie6的png透明插件
http://www.clanccc.co.uk/moo/sortlist.html --- 嵌入式可排序列表
http://www.blackmac.de/archives/44-Mootools-AJAX-timeout.html --- AjaxPlus：为AJAX增加超时事件
mootools版本的lightbox实现
最近对mootools非常感兴趣。如别人评价它一样：轻盈，又不失强大。同时，它的源代码的条理也非常清晰。慢慢一边阅读它的源代码一边尝试它提供的功能是学习它的一个好途径。
从网上找到了基于mootools实现的LightBox组件(一个非常酷的图片浏览组件)，从我上一篇blog中有相关实现这个程序的官方链接(Slimbox),不过这个网站的.be域名我们不通过代理的话访问不了。
我找到的这个mootools的lightbox实现是基于较早期的mootools版本的，和现在的正式发布版本mootools1.0.0有一点点不兼容，我把它修改了下，让它里面的方法基于mootools1.0.0里提供的api了。
可以从我这个链接下载我修改过的Demo：
http://www.live-share.com/files/200713/moobox.rar.html
mootools【七】- mootools的构造应用的基础设施Common.js
正因为mootools是基于OO的思想，所以，在mootools自身提供的功能中，充分使用了OO的理念--继承和实现.
mootools中提供一组 基础功能类：Chain,Events,Options,Group，然后我们可以通过implement他们来在我们的类中实现它们所提供的功能。mootools自己提供的Ajax, XHR和Fx.Base类就实现了这些基础功能类。
类：Chain
作用：这里Chain类把function组织成一个链式结构。
它提供了三个方法：
chain - 添加一个函数到链中
callChain - 执行链中第一个函数，然后删除(原来链中第二个函数将变为新的链首)
clearChain - 清除链中所有函数
var c = new Chain().chain(function(){
alert('Func A!');
}).chain(function(){
alert('Func B!');
}).chain(function(){
alert('Func C!');
});
c.callChain(); //"Func A!"
c.callChain(); //"Func B!"
c.callChain(); //"Func C!"
类：Events
作用：通俗的来讲，它其实像是一个事件管理器(各人觉得大多数情况下应该是自定义事件)。别的类可以实现它来进行自己的事件管理。
它同样提供了三个方法：
addEvent - 向管理器中添加指定事件的监听器
fireEvent - 触发执行指定事件下的所有监听器方法
removeEvent -
var evts = new Events();
var fa = function(e){
alert('aaaaaaa');
};
var fb = function(e){
alert('bbbbbbb');
};
evts.addEvent('onMyEvent', fa).addEvent('myEvent', fb);
evts.fireEvent('onMyEvent'); //先alert出"aaaaaaa",然后alert出"bbbbbbb"
evts.removeEvent('onMyEvent',fa);
evts.fireEvent('onMyEvent'); //alert 出"bbbbbbb"
类：Options
作用：为实现该类的类提供一个可选参数管理器
它提供了一个方法：
setOptions - 设置类的this.options,该方法的第一个参数是要给出的默认参数列表，第二个参数是可提供用户输入的参数列表。如果实现同时实现Options类和Events类，则参数列表中有以on开头(/^on[A-Z]/)的参数名，则自动会把这些参数加入到Events提供的事件管理器中。
var MyClass = new Class({
initialize: function(options){
this.setOptions({
width: '100px',
height: '200px',
onMyEvent: Class.empty
},options);
}
});
MyClass.implement(new Options()); //自定义类实现Options
MyClass.implement(new Events()); //自定义类实现Events
//实例化MyClass
var c = new MyClass({
deep: '100px',
onMyEvent: function(){alert('option[deep]>:' + this.options['deep']);}
});
c.fireEvent('onMyEvent'); //alert出"option[deep]:100px"
类：Group
作用：把元素分组，然后可以为这些组进行添加事件监听器，这些“组监听器”的触发时机是这样的：当组里面的所有元素都触发过指定的事件后，"组监听器"就开始执行。比如有3个按钮A,B,C组成一个Group,然后为这个Group添加一个click事件的监听器方法，则，当你分别去按这3个按钮，不分次序，不分按的次数（比如A按了1次，B按了2次,然后再按C）,当按最后一个按钮时候(比如已经按过了A和B，现在按下C)，那个“组监听器”就被执行了。
<a href="#" id="link1" >AAA</a>
<a href="#" id="link2" >BBB</a>
<a href="#" id="link3" >CCC</a>
$('link1').addEvent('click',function(){alert('AAA');});
$('link2').addEvent('click',function(){alert('BBB');});
$('link3').addEvent('click',function(){alert('CCC');});
var g = new Group($('link1'),$('link2'),$('link3'));
g.addEvent('click', function(){
alert('group event');
});
//当你按照类似如下规律点击链接：
先点击link1：alert出"AAA"
再点击link2：alert出"BBB"
最后点击link3：先alert出"group event"，再alert出"CCC"
一般情况下，Chain,Events和Options都不会单独使用，都会被别的类implement，来为这些类提供功能增强。
mootools【八】 - Css查询支持之Dom.js
mootools支持通过Css选择器语法来获取元素节点，以最少的代码做最多的事情。在Dom.js中提供了实现这些功能的工具方法以及元素级的扩展。
工具方法：$E
作用：按照css选择器语法获取第一个符合规则的元素
参数：
selector - css选择器,如a,#my_div等
filter - 可选，过滤范围，默认是document
<div id="myDiv">
<a href="#" id="link1">AAA</a>
<a href="#" id="link2">BBB</a>
<a href="#" id="link3">CCC</a>
</div>
$E('a','myDiv'); //获取的是id为link1的超链接元素
工具方法：$ES
作用：按照css选择器语法获取所有符合规则的元素
参数：
selector - css选择器,如a,#my_div等
filter - 可选，过滤范围，默认是document
<div id="myDiv">
<a href="#" id="link1">AAA</a>
<a href="#" id="link2">BBB</a>
<a href="#" id="link3">CCC</a>
</div>
$ES('a','myDiv'); //获取所有3个链接元素
-------------------------------------------------------------------------------------------------------------------------
对Element的扩展方法：
方法：getElements
作用：获取当前元素下符合给出css选择器的元素
<div id="myDiv">
<a href="#" id="link1">AAA</a>
<a href="#" id="link2">BBB</a>
<a href="#" id="link3">CCC</a>
</div>
$('myDiv').getElements('a'); //获取myDiv下的3个链接
方法：getElementById
作用：如同document.getElementById方法一样，该方法也是按照指定id来获取元素，只不过是再当前元素之下的范围内查找。
$('myDiv').getElementById('link2');
方法：getElement
作用：功能如同$E,只不过查找范围是当前元素。获取当前元素下符合指定选择器的第一个元素。
$('myDiv').getElement('a');
方法：getElementsBySelector
作用：功能和getElements大致相同，并且支持css选择器中的逗号。该方法使用的时候可以用$$来替代。
$('myDiv').getElementsBySelector('#link1,#link2');
========================================================================
document又在以上扩展的基础上被扩展出一个方法： getElementsByClassName
document.getElementsByClassName('my_clazz');
标准javascript中只有document有getElementsByTagName。经过扩展，mootools又让每个Element元素可以使用 getElementsByTagName方法：
$('myDiv').getElementsByTagName('a');
这部分的扩展已经让mootools的对象获取方式足够方便和强大了。非常的棒！
mootools【九】- 工具类Hash和Color
Hash数据结构，我们通常用来存放键值对。在javascript中，没有规范的Hash的实现，一般，我们都会通过包装对象来模拟实现这样的Hash,来实现规范化的Hash对象操作。
另外，颜色代码的操作在做UI的时候很频繁，尤其是要做十分绚丽的效果的时候，需要对颜色代码做很多的计算，mootools在这个方面做了比较多的工作，通过对String,Array的扩展，以及提供的Color类，我们随时可以对颜色数据进行转换和计算。
类： Hash
方法：
构造方法 - 传入一个包含键值对的object
get - 按键取值
hasKey - 判断是否有指定的键
set - 把键值对存放入Hash
remove - 删除指定键的键值对
each - 用法和Array的each相似，每个键值对的通过each中指定的函数的第一个参数(值)和第二个参数(键)传入。
extend - 把一个包含键值对的对象合并到当前Hash中，相同键的值将被新的值覆盖。
empty - 这个方法的功能在mootools1.0和1.1dev版本中是完全不一样的，1.0中是判断Hash中是否已经没有键值对，而在1.1dev中是清空Hash中的所有键值对，请注意区别。
keys - 获取Hash中的所有键
values - 获取Hash中的所有值
var hash = new Hash({
one: 1,
two: 2,
three: 3
});
var one = hash.get('one');
var hk = hash.hasKey('three');
hash.set('four',4);
hash.each(function(v,k){
alert(k+'-'+v);
});
创建Hash的快捷方法：
$H
$H({a:1,b:2})
------------------------------------------------------------------------------------------------------------------------------------------------
类：Color
构造方法参数：
color - 代表颜色的代码，可以是十六进制代码，代表RGB或HSB代码的数组
type - 可选，用于明确指定代码的类型，有rgb,hsb,hex。当你要创建hsb代码或hex数组形式代码的时候，需要明确指定。
作用：颜色对象，包含了很多颜色管理方法。
var black = new Color('#000');
var purple = new Color([255,0,255]);
方法：mix
作用： 把两种或更多的颜色和当前颜色混合
参数：
参数个数不定，可以把多个颜色代码混合，当最后一个参数是一个数字的时候，这个数字被用作每次混合时取新颜色的百分量。
var darkpurple = black.mix('#fff', purple, 10);
$('myDiv').setStyle('background-color', darkpurple);
方法：invert
作用：取当前颜色的反色
var c = new Color('#FF9900').invert();
$('myDiv').setStyle('background-color',c);
方法：setHue
作用：设置颜色的色相
var c = new Color('#FF9900').setHue(10);
$('myDiv').setStyle('background-color',c);
方法：setSaturation
作用：设置色饱和度
var c = new Color('#FF9900').setSaturation(50);
$('myDiv').setStyle('background-color',c);
方法：setBrightness
作用：设置色彩亮度
var c = new Color('#FF9900').setBrightness(10);
$('myDiv').setStyle('background-color',c);
创建Color的两个快捷工具方法：
$RGB(r, g, b) - 建立RGB模式的Color
$HSB(h, s, b) - 建立HSB模式的Color
如果加载了Color.js，那么Array还会被扩展两个方法：
rgbToHsb - 当前数组前三个元素将被作为rgb值,转换为hsb值代表的数组
hsbToRgb - 和rgbToHsb 相反的功能
mootools【十】- window的扩展
浏览器的window对象本身就提供了我们很多的对浏览器本身属性的获取或设置的方法，但是我们也知道，由于各大浏览器之间对标准的实现不统一，导致很多方法功能上有所出入，mootools为我们统一了我们最常用的一些方法：
mootools的Window.Base.js里面，主要实现了对DOM树创建完成的事件监听。以前，我们可能经常把javascript代码写在html代码的最后面获者加上defer属性，以保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话，javascript将获取不到目标元素而出错)，但是，这种方式看起来还是太杂乱，保险系数也不是最高的。其实像ie的话可以根据document的readyState属性来判断文档树的建立状态，而有些浏览器在创建文档树之后会触发onload事件，mootools把这些都包装了起来，形成一个统一的自定义事件"domready"，你可以像添加其他监听器一样来为window添加这个domready事件的监听器方法：
window.addEvent('domready', function(){
alert('the dom is ready');
});
另外，有个快捷方法，效果和以上相同：
window.onDomReady(function(e){
alert('dom is ready!!!');
});
mootools的Window.Size.js中呢，提供了一系列和浏览器window的尺寸有关的工具方法，
window的扩展方法：
方法： getWidth - 获取window的当前高度(不包含滚动条的滚动量，即当前能见视野高度)
方法：getHeight - 获取window的当前宽度(不包含滚动条的滚动量，即当前能见视野宽度)
方法：getScrollWidth - 获取window的当前高度(包含了整个内容区域，即可滚动部分也计算在内)
方法：getScrollHeight - 获取window的当前宽度(包含了整个内容区域，即可滚动部分也计算在内)
方法：getScrollLeft - 获取window滚动的水平偏移量
方法：getScrollTop - 获取window滚动的垂直偏移量
方法：getSize - 获取window上面几个方法的提供的数据，格式：
{
'size': {'x': this.getWidth(), 'y': this.getHeight()},
'scrollSize': {'x': this.getScrollWidth(), 'y': this.getScrollHeight()},
'scroll': {'x': this.getScrollLeft(), 'y': this.getScrollTop()}
}
mootools【十一】- 多彩的开始
mootools中集成了一些非常好用的界面组件， 也提供了非常好用的界面效果工具类，用这些工具做界面效果，感觉上比用Prototype+Scriptaculous开发更方便，效果也更加的顺畅平滑。
mootools的界面库Moo.Fx的设计十分的讲究OO原则，通过对提供了基本功能的基类的继承，扩展出了不同功能的工具类和组件类。Fx.Base就是这样一个基础类，它本身实现了Events,Chain,Options三个类，它包含了界面效果的最基本的动作和属性：
构造方法的可选属性：
------------------------------------------------------------------------------------------------------------------------------
onStart - 效果开始前执行的方法，默认是一个空的function。你可以指定你的function。
onComplete - 完成效果后执行的方法，默认是一个空的function。你可以指定你的function。
onCancel - 中断效果后执行的方法，默认是一个空的function。你可以指定你的function。
transition - 效果的过渡变换所使用的方程，用来描述效果的变化规律。你可以在Fx.Transitions类中找到其他的方程，默认使用的是Fx.Transitions.sineInOut(即正弦)
duration - 变化频率，毫秒。默认为500。
unit - 变化量的单位。默认是'px',你可以指定如'em','%'之类。
wait - true/false。指定在执行下一个过渡效果之前是否等待当前的过渡效果执行结束。默认为true
fps - 帧频。即每秒所执行的变换次数。默认为30帧/秒。
------------------------------------------------------------------------------------------------------------------------------
方法：set
作用：不经过过渡变换效果，直接设置为指定的值
var myFx = new Fx.Style('myElement', 'opacity').set(0);
方法：start
作用：执行效果，让指定的开始值过渡变换到指定的结束值
var myFx = new Fx.Style('myElement', 'opacity').start(0,1);
方法：stop
作用：中断效果的执行，如果指定了参数为false,则会执行onCancel指定的方法。
最后，如果要查看有哪些变换方程可以选用，可以看Fx.Transitions.js里的Fx.Transitions类，里面提供了非常之多的变换方程，具体的效果差别，自己去一个个去试试看吧。
mootools【十二】- 多彩的开始2
这些天有点事情比较忙，几天没更新了Blog了。不能让这个mootools的学习文章半途而废了。
上回说到mootools的Fx.Base类，它是mootools效果库Fx的基础，而我们平时会使用最频繁的，就是Fx.Style类，它是直接继承了Fx.Base类的。这个效果类非常强大，基本上可以实现对CSS样式中任何一个属性的过渡变换。
Fx.Base中提供的方法在Fx.Style中都能用，用法是相同的，其他扩展的方法如下：
方法：hide
作用：如同调用Fx.Base的set方法，并且参数为0（即set(0)）,当效果作用在opacity,或者width,height(overflow需要是hidden)的时候,调用这个方法的效果是隐藏元素。
var myFx = $('myDiv').effect('width', {duration: 1000});
myFx.hide();
方法：start
作用：在两个区间之间进行过渡变换，和Fx.Base的start用法一样。
var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
marginChange.start(10); //从myElement当前的margin-top值过渡到10
marginChange.start(1,20); //myElement的margin-top值从1过渡到20
由于Fx.Style的引入，Element又被扩展了一个实现效果的快捷方法： effect
具体用法如下：
var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear});
myEffect.start(10, 100);
想实现同时进行多个效果怎么做？方便，Fx.Styles就是提供这样功能的一个类，它也是直接继承了Fx.Base的类，你可以像这样来使用它：
var myFx = new Fx.Styles('myDiv', {duration: 1000});
myFx.start({
'width':[100,300],
'height':[100,200]
});
十分简单明了。
同样，Effect由此多了一个effects快捷方法，可以这样使用：
var myFxs= $(myElement).effects({duration: 1000, transition: Fx.Transitions.sineInOut});
myFxs.start({
'height': [10, 100],
'width': [900, 300]
});
另外，除了上面的两个类之外，还有一个可以用来作转换效果的类：Fx.Elements，这个类可以按照指定的元素顺序来执行指定的效果，就像这样：
var myElementsEffects = new Fx.Elements($$('a'));
myElementsEffects.start({
'0': { //对第一个元素执行opacity和width的过渡变化
'opacity': [0,1],
width': [100,200]
},
'1': { //对第二个元素执行opacity过渡变换
'opacity': [0.2, 0.5]
}
});
差不多就这样了，不过别看就这么些东西，但是它们提供的功能足够强大，好好使用他们吧:)。
mootools1.1正式发布了,新特性一览
今天上了下mootools的主站，发现1.1 released。
看了一下，主要的新特性如下：
一.更快的速度,兼容性和全方位优化
mootools在速度上面进行了很大的优化，比较突出的是在CSS选择器方面(不仅仅在实现逻辑方面进行优化，XPATH被在所有支持的浏览器中启用 )
二.更加新颖的事件系统
1.自定义事件：提供了一套api来提供定义自定义事件。比如mootools自带的mouseenter,mouseleave,domready就是这类自定义事件。
2.Element::cloneEvents提供了事件的复制
如:note.clone().cloneEvents(note); //复制note对象并且把原来note对象上的事件监听也复制过去
三.提供更多的Element的方法及新的Element构造方式。
例如新的构造Elment如下：
var note = new Element('div', {
'id': 'note',
'class': 'note',
'styles': {
'left': 15,
'top': 15
},
'events': {
'click': noteConfirm,
'mouseover': noteShowMore
}
});
对比原先的功能对等的构造方式：
var note = new Element('div').addClass('note').setProperty('id', 'note').setStyles({
'left': 15,
'top': 15
}).addEvents({
'click': noteConfirm,
'mouseover': noteShowMore
});
*新方法：
Element::set - 功能如同新的构造方法的第二个参数一样，可以给Element添加各种属性
Element::hasChild - 判断是否内部含有所给出的子元素
*改进的方法：
Element::setStyle - 对于没有明确给出单位的数值型值，将默认为单位是'px'
Element::adopt - 新版本支持多个元素（这个非常不错，很方便）
四.元素过滤器
利用新的元素过滤器，可以对使用$$得到的元素进行进一步的归纳。这些将不需要Element.Selectors，而只使用原生的tag名选择过滤方法(应该速度上快一点吧)
一下例子中将不会用到Element.Selectors:
$('div').filterByClass('myClass');
而这个会用到：
$('div.myClass');
更真实的例子：
$('myElement').getChildren().filterByClass('myClass');
五.更加完善的Ajax功能
基本的Ajax实现逻辑从Ajax类中转入到了XHR类中了。
其他提供的一些更加强大的方法：
Ajax::cancel - 可中断正在执行的请求。如果启用了‘autoCancel’选项，则当发出新的请求的时候自动中断当前请求
Ajax::evalScripts - 加强了全局的eval及自动执行Content-Type为javascript的返回内容
postBody选项更名为data,因为现在XHR可以分别接受get和post方法提交的数据
六.Hash.Cookie和Group
Hash.Cookie是一个扩展的Hash类，它可以自动或手工的保存或加载在Cookie中以JSON格式存储的数据
Group - 可以对元素和事件进行分组处理的类(用法可以参见我前面的文章)
七.工具集
1）新或增强的工具方法：
$defined , $time , $type
2）新的Array方法：
Array::getLast , Array::getRandom , Array::merge ,Array::include
3)新的String方法：
String::contains , String::escapeRegExp
4)新的Number方法：
Number::times(好Ruby啊!) , Number::limit , Number::round
5)浏览器检测
加入了window.webkit419 , window.webkit420，而window.khtml已经被作为过期api
八.增强的垃圾收集机制
九.其他的增强
1）Accordion::addSection可以用来在向一个已经创建的Accordion中添加更多的元素
2）Sortables变得更加稳定，以及不依赖于Drag.Move
3）新的Fx.Transtions，它已经变得更加的可配置
4）Fx.Slide允许border和margin
5）Element::getStyle现在已经全面支持padding/margin/border(包括针对IE的width/height的修正)
十.变更的API
一些过期的api在v1.1中还是能用，但是，在v1.2中将作删除。
1.Ajax的postBody变更为data
2.Array::test被Array::contains替代
3.Object.extend,Object.merge和Object.Native现在已经推荐使用$extend, $merge,$native
4.Window.onDomReady被作为过期API,取代它的是'domready'这个自定义事件，如：
window.addEvent('domready', fn).
5.Hash::each的功能行为已经变更成和$each所提供的功能等价的行为。
6.Hash::empty的功能变为清空所有hash键值(原来的功能是判断hash是否为空,现在等价的功能由Hash::length提供)。
7.window.khtml由window.webkit取代