mootools框架【一】-Element篇: 方法完全解析

mootools--Element篇 

--内容: 封装一些常用的 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方法来销毁。