mootools【五】 - Element篇

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>标签对象

$$('a','b');                  //获取页面上所有超链接<a>标签和粗体<b>标签

$$('#my_div');          //获取id为my_div的元素

$$('#my_div a.myClass');      //获取id为my_div的元素子元素，并且这些自元素是的所有class="myClass"的<a>标签

 

=================================Element扩展方法=====================================

方法： 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之前

 

方法： injectBefore

作用：可以用来把当前元素插入到指定元素之前 (即相当于参数为'before'的inject方法)

<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>

 

$('myDiv3').injectBefore($('myDiv1')); 

 

方法：injectAfter

作用：可以用来把当前元素插入到指定元素之后 (即相当于参数为'after'的inject方法)

<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>

 

$('myDiv3').injectAfter($('myDiv1')); 

 

方法：injectInside

作用：可以用来把当前元素插入到指定元素之中 (即相当于参数为'inside'的inject方法)

<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>

 

$('myDiv3').injectInside($('myDiv1')); 

 

方法：adopt

作用：可以在当前元素中插入指定元素(参数可以是元素id，元素引用，html元素tag名)

$('myDiv').adopt($('myDiv1')); 

$('myDiv').adopt('myDiv1'); 

$('myDiv').adopt('button'); 

 

方法：remove

作用：删除元素

$('myDiv').remove();

 

 

方法：clone

参数列表：

contents - 是否连带节点的内容进行复制(deep clone)，如果不指定，则连带。

作用：复制元素

$('myDiv').clone();     

$('myDiv').clone(false);     //只复制myDiv本身，不复制其content和子元素

 

方法：replaceWith

作用：用其他元素替换当前元素

<div id="myDiv1">abc</div>

var a = new Element('button');
a.value = 'test';
$('myDiv1').replaceWith($(a));

 

方法：appendText

作用：向元素添加文本节点

<div id="myDiv1">hello </div>

 

$('myDiv1').appendText('world');

 

//结果：

<div id="myDiv1">hello world</div>

 

方法：hasClass

作用：判断元素的class属性中是否包含指定的样式名

<div id="myDiv1" class="clazz_1 clazz_2">hello </div>

 

var x = $('myDiv1').hasClass('clazz_1');               //true

 

方法：addClass

作用：向指定元素上添加样式class

$('myDiv1').addClass('clazz_1');

 

方法：removeClass

作用：在指定元素上删除指定的样式class

$('myDiv1').removeClass('clazz_1');

 

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

 

方法：setStyle

作用：向元素设置一个style属性

$('myDiv').setStyle('width','100px');

 

方法:setStyles

作用：向元素设置多个style属性

$('myDiv').setStyles({
    border: '1px solid #000',
    width: '300px',
    height: '400px'
});

 

或者(不推荐在这种方式下设置opacity属性)：

 

$('myDiv').setStyles('border: 1px solid #000; width: 300px; height: 400px;');

 

方法：setOpacity

作用：设置元素的透明度

$('myDiv').setOpacity(0.5);       //透明度设置为50%

 

方法：getStyle

作用：获取style中指定属性的值

var w = $('myDiv').getStyle('width'); 

 

方法：addEvent

作用：为元素增加事件监听器

$('myDiv').addEvent('click', function(){

       alert('haha,clicked!');

});

 

方法：addEvents

作用：为元素增加多个事件监听器(不过，在mootools1.0.0版本中，这个方法是有BUG的，推荐不要使用；mootools1.1开发版中，已经修复了BUG)

$('myBtn').addEvents({
    'click': function(e){alert('clicked!!!');},
    'mouseout': function(e){alert('mouseouted!!!');}
 });

 

方法：removeEvent

作用：从元素上删除指定的监听器方法

var fa = function(e){alert('aaaaaaaaaaaaaa');};
var fb = function(e){alert('bbbbbbbbbbbbbb');};

$('myBtn').addEvent('click',fa);

$('myBtn').addEvent('click',fb);

$('myBtn').removeEvent('click'，fa);

 

方法：removeEvents

作用：从元素上删除指定事件的监听器，如果不指定事件，则将删除所有事件的监听器(和addEvents方法一样，该方法再1.0.0版本中也存在BUG,在1.1开发版本中已修复)

var fa = function(e){alert('aaaaaaaaaaaaaa');};
var fb = function(e){alert('bbbbbbbbbbbbbb');};

$('myBtn').addEvent('click',fa);

$('myBtn').addEvent('click',fb);

$('myBtn').removeEvents('click');

 

方法：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将立即被执行

 

 方法：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"

 

 方法：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"

 

方法：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"

 

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

 

方法：setProperty

作用：设置元素的属性

$('myImage').setProperty('src', 'whatever.gif');

 

方法：setProperties

作用：设置元素的多个属性

$('myElement').setProperties({
   src: 'whatever.gif',
   alt:  'whatever dude'
});

 

 方法：setHTML

作用：相当于设置元素的innerHTML

$('myElement').setHTML(newHTML);

 

方法：getProperty

作用：获取元素的指定属性

$('myImage').getProperty('src')

 

方法：getTag

作用：获取HTML标签元素的标签名称

<img id="myImage" src="xx.gif" />

$('myImage').getTag();         //img

 

方法：scrollTo

作用：相当于把滚动条滚动到指定的状态(窗口或元素在overflow的情况下)

window.scrollTo(0,200);

 

方法：getValue

作用：获取tag为textarea, select 或 input这三个元素的value属性值。但select多选状态下取值不支持。

<input type="text" value="abcd" id="myInput"/>

var v = $('myInput').getValue();
 alert(v);             //alert  "abcd"

 

方法：getSizze

作用：获取元素对象当前的size/scoll值

返回值格式如下：

{
   'scroll': {'x': 100,  'y': 100},
   'size':   {'x': 200,  'y': 400},
   'scrollSize': {'x': 300,  'y': 500}
  }

$('myElement').getSize();

 

方法：getPosition

作用：获取元素的offset位置

返回值格式：

{x: 100, y:500}

$('element').getPosition();

 

方法：getTop

作用：相当与getPosition返回的y值

$('element').getTop();

 

方法：getLeft

作用：相当与getPosition返回的x值

$('element').getLeft();

 

方法：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方法来销毁。