--内容: 封装一些常用的 DOM 操作
(1).直接可以在xhtml 中进行操作元素. 而不用嵌套在<script>标签中使用 javascript操作.
(2).用 $ 代替javascript 中document.getElmentById方法. 操作元素只需要使用 $('myElement')即可.
(3).增加了很多方便实用的方法, 这些方法使对 元素 的各种复杂的操作变得容易, 摈弃(应该是封装)了原来繁琐的 DOM操作. 以 appendText 为例 :
方法：appendText
作用：向元素添加文本节点
例子：
<div id="myDiv1">hello </div>
$('myDiv1').appendText('world');
//结果为：
<div id="myDiv1">hello world</div>
Ajax开发中，做的最多的就是对DOM的操作，增删节点，设置样式等等等等，如果按照常规的javascript开发的话，工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花比较大的功夫，对我们使用频率最频繁的作用操作进行封装(其中包括修正各个浏览器之间的方法差异问题)。mootools提供了一套非常出色的解决方案，并且更OO。
创建DOM节点
例子：var myInput = new Element('input');
1. 方法：$
作用：按照id取元素，如同document.getElmentById来获取的元素
即: 这里的 $ 相当于 document.getElmentById, 两者功能是相同的.
例子：
//获取元素
var myDiv=$("myDiv");
//将用getElementById获取的元素进行扩展成使用$方法获取的元素
//这样可以具备一些特殊的方法
var mydiv_noextend=document.getElementById("mydiv");
var mydiv_extended = $(mydiv_noextend);
2. 方法：$$
作用：通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的
支持)
例子：
$$('a'); //获取页面上所有超链接<a>标签对象
$$('a','b'); //获取页面上所有超链接<a>标签和粗体<b>标签
$$('#my_div'); //获取id为my_div的元素
$$('#my_div a.myClass'); //获取id为my_div的元素子元素，并且这些
自元素是的所有class="myClass"的<a>标签
----------------------------------------Element扩展方法------------------------------------
3. 方法：inject
作用：可以用来把当前元素插入到指定元素之前(before)，之中(inside)，之后
(after)。
例子：
<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
$('myDiv3').inject($('myDiv1'),'before'); //把myDiv3插入到myDiv1之前
//结果:
<div id="myDiv3">ccc</div>
<div id="myDiv2">bbb</div>
<div id="myDiv1">aaa</div>
4. 方法：injectBefore
作用：可以用来把当前元素插入到指定元素之前 (即相当于参数为'before'的
inject方法)
例子：
<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
$('myDiv3').injectBefore($('myDiv1'));
5. 方法：injectAfter
作用：可以用来把当前元素插入到指定元素之后 (即相当于参数为'after'的inject
方法)
例子：
<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
$('myDiv3').injectAfter($('myDiv1'));
6. 方法：injectInside
作用：可以用来把当前元素插入到指定元素之中 (即相当于参数为'inside'的
inject方法)
例子：
<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
$('myDiv3').injectInside($('myDiv1'));
7. 方法：adopt
作用：可以在当前元素中插入指定元素 (元素嵌套)
(参数可以是元素id，元素引用，html元素tag名)
例子：
$('myDiv').adopt($('myDiv1'));
$('myDiv').adopt('myDiv1');
$('myDiv').adopt('button');
8. 方法：remove
作用：删除元素
例子：$('myDiv').remove();
9. 方法：clone
参数列表：
contents：是否连带节点的内容进行复制(deep clone)，如果不指定，则连带。
作用：复制元素
例子：
$('myDiv').clone();
$('myDiv').clone(false); //只复制myDiv本身,不复制其content和子s
10. 方法：replaceWith
作用：用其他元素替换当前元素
例子：
<div id="myDiv1">abc</div>
var a = new Element('button');
a.value = 'test';
$('myDiv1').replaceWith($(a));
11. 方法：appendText
作用：向元素添加文本节点
例子：
<div id="myDiv1">hello </div>
$('myDiv1').appendText('world');
//结果：
<div id="myDiv1">hello world</div>
12. 方法：hasClass
作用：判断元素的class属性中是否包含指定的样式名
例子：
<div id="myDiv1" class="clazz_1 clazz_2">hello </div>
var x = $('myDiv1').hasClass('clazz_1'); //true
13. 方法：addClass
作用：向指定元素上添加样式class
例子：$('myDiv1').addClass('clazz_1');
14. 方法：removeClass
作用：在指定元素上删除指定的样式class
例子：$('myDiv1').removeClass('clazz_1');
15. 方法：toggleClass
作用：在addClass和removeClass的功能之间切换
例子：
<div id="myElement" class="myClass"></div>
$('myElement').toggleClass('myClass');
//结果为：
<div id="myElement" class=""></div>
//再次：
$('myElement').toggleClass('myClass');
//结果为：
<div id="myElement" class="myClass"></div>
16. 方法：setStyle
作用：向元素设置一个style属性
例子：$('myDiv').setStyle('width','100px');
17. 方法:setStyles
作业：向元素设置多个style属性
例子：
$('myDiv').setStyles({
border: '1px solid #000',
width: '300px',
height: '400px'
});
或者(不推荐在这种方式下设置opacity属性)：
$('myDiv').setStyles('border:1px solid #000; width: 300px; ');
18. 方法：setOpacity
作用：设置元素的透明度
例子：$('myDiv').setOpacity(0.5); //透明度设置为50%
19. 方法：getStyle
作用：获取style中指定属性的值
例子：var w = $('myDiv').getStyle('width');
20. 方法：addEvent
作用：为元素增加事件监听器
例子：
$('myDiv').addEvent('click', function(){
alert('haha,clicked!');
});
说明: 1. 这里把定义事件与添加事件结合起来写是可以的, 可以提高书写效率.建议初学者先定义事件, 然后再添加事件到元素中. 方法见22: removeEvent
2. 结合写的顺序是: $('..').addEvent('触发方式', function(e) { 行为 });
3. 事件的行为可为空, 本例行为为: 单击弹出框
21. 方法：addEvents
作用：为元素增加多个事件监听器
例子：
$('myBtn').addEvents({
'click': function(e){alert('clicked!!!');},
'mouseout': function(e){alert('mouseouted!!!');}
});
注意: 每一个事件都需要使用大括号括起来. 相当于事件数组.
22. 方法：removeEvent
作用：从元素上删除指定的监听器方法
例子：
//先定义两个事件, 同时给事件定义行为.
var fa = function(e){alert('aaaaaaaaaaaaaa');};
var fb = function(e){alert('bbbbbbbbbbbbbb');};
//添加事件. 触发方式为单击(click).
$('myBtn').addEvent('click',fa);
$('myBtn').addEvent('click',fb);
//删除事件, 名为 fa, 触发方式为 单击
//(因为一个事件可能有多个触发行为)
$('myBtn').removeEvent('click'，fa);
23. 方法：removeEvents
作用：从元素上删除指定事件的监听器，如果不指定事件，则将删除所有事件的
监听器
例子：
var fa = function(e){alert('aaaaaaaaaaaaaa');};
var fb = function(e){alert('bbbbbbbbbbbbbb');};
$('myBtn').addEvent('click',fa);
$('myBtn').addEvent('click',fb);
$('myBtn').removeEvents('click');
24. 方法：fireEvent
作用：触发元素的指定事件上的所有监听器方法
例子：
var fa = function(e){alert('aaaaaaaaaaaaaa');};
var fb = function(e){alert('bbbbbbbbbbbbbb');};
$('myBtn').addEvent('click',fa);
$('myBtn').addEvent('click',fb);
$('myBtn').fireEvent('click'); //fa和fb将立即被执行
25. 方法：getFirst
作用：获取当前元素的第一个子元素节点
例子：
<div id="myDiv">
<div id="first">first</div>
<div id="second">second</div>
<div id="last">last</div>
</div>
var f = $('myDiv').getFirst();
alert(f.id); //alert "first"
26. 方法：getLast
作用：获取当前元素的最后一个子元素节点
例子：
<div id="myDiv">
<div id="first">first</div>
<div id="second">second</div>
<div id="last">last</div>
</div>
var l = $('myDiv').getLast();
alert(l.id); //alert "last"
27. 方法：getParent
作用：获取当前元素的父元素节点
例子：
<div id="myDiv">
<div id="first">first</div>
<div id="second">second</div>
<div id="last">last</div>
</div>
var par = $('first').getParent();
alert(par.id); //alert "myDiv"
28. 方法：getChildren
作用：获取当前元素所有子元素节点
例子：
<div id="myDiv">
<div id="first">first</div>
<div id="second">second</div>
<div id="last">last</div>
</div>
var cs = $('myDiv').getChildren();
alert(cs.length); //alert 3
29. 方法：setProperty
作用：设置元素的属性
例子：$('myImage').setProperty('src', 'whatever.gif');
30. 方法：setProperties
作用：设置元素的多个属性
例子：
$('myElement').setProperties({
src: 'whatever.gif',
alt: 'whatever dude'
});
31. 方法：setHTML
作用：相当于设置元素的innerHTML
例子：$('myElement').setHTML(newHTML);
32. 方法：getProperty
作用：获取元素的指定属性
例子：$('myImage').getProperty('src')
33. 方法：getTag
作用：获取HTML标签元素的标签名称
例子：
<img id="myImage" src="xx.gif" />
$('myImage').getTag(); //img
34. 方法：scrollTo
作用：相当于把滚动条滚动到指定的状态(窗口或元素在overflow的情况下)
例子：window.scrollTo(0,200);
35. 方法：getValue
作用：获取tag为textarea, select 或 input这三个元素的value属性值。但
select多选状态下取值不支持。
例子：
<input type="text" value="abcd" id="myInput"/>
var v = $('myInput').getValue();
alert(v); //alert "abcd"
36. 方法：getSize
作用：获取元素对象当前的size/scoll值
例子：
返回值格式如下：
{
'scroll': {'x': 100, 'y': 100},
'size': {'x': 200, 'y': 400},
'scrollSize': {'x': 300, 'y': 500}
}
$('myElement').getSize();
37. 方法：getPosition
作用：获取元素的offset位置
例子：
返回值格式：
{x: 100, y:500}
$('element').getPosition();
38. 方法：getTop
作用：相当与getPosition返回的y值
例子：$('element').getTop();
39. 方法：getLeft
作用：相当与getPosition返回的x值
例子：$('element').getLeft();
40. 方法：getCoordinates
作用：获取元素的当前width, height, left, right, top, bottom值
例子：
返回值格式：
{
width:200,
height:300,
left:100,
top:50,
right:300,
bottom: 350
}
var myValues = $('myElement').getCoordinates();
补充说明:
mootools提供了一个“垃圾收集器”Garbage。
一般情况下，使用$方法获取到的对象都会被这个“垃圾收集器”登记下来，然后在窗体关闭(unload)的时候，销毁这些登记过的对象。也可以调用Garbage.collect方法来登记，然后在你必要的时候调用Garbage.trash方法来销毁。
有话要说