Moontools——Element扩展方法篇

1.    方法：inject
作用：把当前元素插入到指定元素之前（before），之中（inside），之后（after）
    扩展方法：injectBefore，injectInside，injectAfter
例子：
    <div id="myDiv1">aaa</div>
       <div id="myDiv2">bbb</div>
    $(‘myDiv1’).inject($(‘myDiv2’),inside);
可写成：$(‘myDiv1’).injectInside($(‘myDiv2’)) ;

2.    方法：adopt
作用：在当前元素中插入指定元素（元素嵌套）
        （参数可以是元素id，元素引用，html元素，tag名）
例子：
    $('myDiv').adopt($('myDiv1'));
    $('myDiv').adopt('myDiv1');
    $('myDiv').adopt('button');

3.    方法：remove
作用：删除元素

4.    方法：clone（bool contents）
作用：复制元素
参数：contents：是否连带节点的内容进行复制(deep clone)，如果不指定，则连带。
例子：
$('myDiv').clone();     
$('myDiv').clone(false); //只复制myDiv本身,不复制其content和子s

5.    方法：replaceWith
作用：用其他元素替换当前元素
例子：
<div id=’myDiv’>abc</div>
         Var a = new Element(‘button’);
a.value=’test’;
$(‘myDiv’).replaceWith(a);

6.    方法：appendText
作用：向元素添加文本
例子：
<div id="myDiv1">hello </div>
$('myDiv1').appendText('world');
//结果：
<div id="myDiv1">hello world</div>

7.    方法：hasClass
作用：判断元素的class是否包含指定样式。

8.    方法：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>

9.    方法：setStyle
作用：向元素设置一个style属性
例子：
$('myDiv').setStyle('width','100px');
 
10.    方法：setStyles
作用：向元素设置多个style属性
例子：$(‘myDiv’).setStyles({
Border:’1px solid’,
Width:’13px’
});//注意：写法

11.    方法:getStyle
作用：获取style中指定属性的值
例子：var w=$(‘myDiv’).getStyle(‘width’);

12.    方法：addEvent
作用：添加事件监听器
方法：addEvents
作用：添加多个事件监听器
例子：
        $(‘myBtn’).addEvents({
‘click’:function(e){alert(‘…’);},
‘mouseout’:function(e){alert(‘…’)};
});//注意，写法

13.    方法：removeEvent
作用：从元素上删除指定监听器。
例子：
        Var a1=function(e){…};
        Var a2=function(e){…};
        $(‘btn’).addEvents({a1,a2});
        $(‘btn’).removeEvent(‘click’,a1);

14.    方法：removeEvents
作用：从元素上删除指定时间的监听器，如果不指定事件，则将删除所有事件监听器。
    例子：
        Var a1=function(e){…};
        Var a2=function(e){…};
        $(‘btn’).addEvents({a1,a2});
        $(‘btn’).removeEvents(‘click’);

15.    方法：fireEvent
作用：触发元素的指定事件上的所有监听器方法
例子：
Var a1=function(e){…};
        Var a2=function(e){…};
        $(‘btn’).addEvents({a1,a2});
        $(‘btn’).fireEvent (‘click’);//a1和a2事件立即执行

16.    方法：getFirst
相反方法：getLast(作用：获取当前元素最后一个得子元素节点)
作用：获取当前元素的第一个子元素节点

17.    方法：getParent
相反方法：getChildren（作用：获取元素的所有子节点）
作用：获取元素的父节点
    
18.    方法：setProperty
作用：设置元素的属性
例子：$('myImage').setProperty('src', 'whatever.gif');

19.    方法：setProperties
作用：设置元素的多个属性
例子：
$('myElement').setProperties({
   src: 'whatever.gif',
   alt:  'whatever dude'
});

20. 方法：setHTML
作用：相当于设置元素的innerHTML
例子：$('myElement').setHTML(newHTML);
 
22. 方法：getProperty
作用：获取元素的指定属性
例子：$('myImage').getProperty('src')
 
23. 方法：getTag
作用：获取HTML标签元素的标签名称
例子：
<img id="myImage" src="xx.gif" />
$('myImage').getTag();         //img
 
24. 方法：scrollTo
作用：相当于把滚动条滚动到指定的状态(窗口或元素在overflow的情况下)
例子：window.scrollTo(0,200);
 
25. 方法：getValue
作用：获取tag为textarea, select 或 input这三个元素的value属性值。但
   select多选状态下取值不支持。
 
26. 方法：getSize
作用：获取元素对象当前的size/scoll值
例子：
返回值格式如下：
{
   'scroll': {'x': 100,  'y': 100},
   'size':   {'x': 200,  'y': 400},
   'scrollSize': {'x': 300,  'y': 500}
}
$('myElement').getSize();
 
27. 方法：getPosition
扩展方法：getTop（作用：相当与getPosition返回的y值）
          getLeft（作用：相当与getPosition返回的x值）
作用：获取元素的offset位置
例子：
返回值格式：
{x: 100, y:500}
$('element').getPosition();
 
 
28. 方法：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方法来销毁。