Ajax开发中,做的最多的就是对DOM的操作, 增删节点,设置样式等等等等,如果按照常规的javascript开发的话,工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花比较大的功夫,对我们使用频率最频繁的功能操作进行封装(其中包括修正各个浏览器之间的方法差异问题),让我们的开发事半功倍。
mootools也提供了一套非常出色的解决方案,并且更OO。
首先,之前,通常我们创建DOM节点,都使用document.createElement()方法,而我们看mootools式的创建方法:
- var myInput = new Element('input');
非常的优雅啊。
方法: $
美元,又见美元!
$基本上成了javascript框架中的标志性建筑了,短小精悍的语法使我们的代码看起来舒服不少,也使我们的js文件瘦了下身。
时下,各大javascript框架中都会提供$这个方法,基本上它都有按照id来获取DOM元素的功能,但各个框架在具体诠释它的时候各有不同的手法,功能的强弱上也不一样。比如prototype.js中的$可以根据给出的一个或多个id来获取这些DOM元素,而jQuery里的$更是非常强,可以按照CSS选择器的语法来获取DOM元素(其实mootools和prototype也是可以的,只不过是$$这个方法)。
这是mootools中的$()的最常用用法,它返回id为my_div的元素,并且这个元素被加上了所有mootools所进行的扩展。
- var mydiv = $('my_div');
如果你使用document.getElmentById来获取的元素,则此时这个元素将没有包含mootools的任何扩展,你可以把这个元素对象作为参数调用$方法,之后返回的元素将被加上mootools的扩展。
- var mydiv_noextend = document.getElementById('my_div');
- var mydiv_extended = $(mydiv_noextend);
方法: $$
功能:通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的支持)
- $$('a'); //获取页面上所有超链接标签对象
- $$('a','b'); //获取页面上所有超链接标签和粗体标签
- $$('#my_div'); //获取id为my_div的元素
- $$('#my_div a.myClass'); //获取id为my_div的元素子元素,并且这些自元素是的所有class="myClass"的标签
=================================Element扩展方法=====================================
方法: inject
作用:可以用来把当前元素插入到指定元素之前(before),之中(inside),之后(after)。
方法: injectBefore
作用:可以用来把当前元素插入到指定元素之前 (即相当于参数为'before'的inject方法)
方法:injectAfter
作用:可以用来把当前元素插入到指定元素之后 (即相当于参数为'after'的inject方法)
方法:injectInside
作用:可以用来把当前元素插入到指定元素之中 (即相当于参数为'inside'的inject方法)
方法:adopt
作用:可以在当前元素中插入指定元素(参数可以是元素id,元素引用,html元素tag名)
方法:remove
作用:删除元素
方法:clone
参数列表:
contents - 是否连带节点的内容进行复制(deep clone),如果不指定,则连带。
作用:复制元素
方法:replaceWith
作用:用其他元素替换当前元素
方法:appendText
作用:向元素添加文本节点
方法:hasClass
作用:判断元素的class属性中是否包含指定的样式名
方法:addClass
作用:向指定元素上添加样式class
方法:removeClass
作用:在指定元素上删除指定的样式class
方法:toggleClass
作用:在addClass和removeClass的功能之间切换
方法:setStyle
作用:向元素设置一个style属性
方法:setStyles
作用:向元素设置多个style属性
方法:setOpacity
作用:设置元素的透明度
方法:getStyle
作用:获取style中指定属性的值
方法:addEvent
作用:为元素增加事件监听器
方法:addEvents
作用:为元素增加多个事件监听器(不过,在mootools1.0.0版本中,这个方法是有BUG的,推荐不要使用;mootools1.1开发版中,已经修复了BUG)
方法:removeEvent
作用:从元素上删除指定的监听器方法
方法:removeEvents
作用:从元素上删除指定事件的监听器,如果不指定事件,则将删除所有事件的监听器(和addEvents方法一样,该方法再1.0.0版本中也存在BUG,在1.1开发版本中已修复)
方法:fireEvent
作用:触发元素的指定事件上的所有监听器方法
方法:getFirst
作用:获取当前元素的第一个子元素节点
方法:getLast
作用:获取当前元素的最后一个子元素节点
方法:getParent
作用:获取当前元素的父元素节点
方法:getChildren
作用:获取当前元素所有子元素节点
方法:setProperty
作用:设置元素的属性
方法:setProperties
作用:设置元素的多个属性
方法:setHTML
作用:相当于设置元素的innerHTML
方法:getProperty
作用:获取元素的指定属性
方法:getTag
作用:获取HTML标签元素的标签名称
方法:scrollTo
作用:相当于把滚动条滚动到指定的状态(窗口或元素在overflow的情况下)
方法:getValue
作用:获取tag为textarea, select 或 input这三个元素的value属性值。但select多选状态下取值不支持。
js 代码
方法:getSizze
作用:获取元素对象当前的size/scoll值
返回值格式如下:
{
'scroll': {'x': 100, 'y': 100},
'size': {'x': 200, 'y': 400},
'scrollSize': {'x': 300, 'y': 500}
}
方法:getPosition
作用:获取元素的offset位置
返回值格式:
{x: 100, y:500}
方法:getTop
作用:相当与getPosition返回的y值
方法:getLeft
作用:相当与getPosition返回的x值
方法:getCoordinates
作用:获取元素的当前width, height, left, right, top, bottom值
返回值格式:
{
width: 200,
height: 300,
left: 100,
top: 50,
right: 300,
bottom: 350
}
mootools提供了一个“垃圾收集器”Garbage。
一般情况下,使用$方法获取到的对象都会被这个“垃圾收集器”登记下来,然后在窗体关闭(unload)的时候,销毁这些登记过的对象。也可以调用Garbage.collect方法来登记,然后在你必要的时候调用Garbage.trash方法来销毁。