2018年04月6日网站服务器迁移完成……

Mootools DOM操作

mootools 苏 demo 1976℃ 0评论

(1)方法: $

1.var mydiv = $(‘my_div’);
如果你使用document.getElmentById来获取的元素,则此时这个元素将没有包含mootools的任何扩展,你可以把这个元素对象作为参数调用$方法,之后返回的元素将被加上mootools的扩展。

js 代码

1.var mydiv_noextend = document.getElementByIdx_x(‘my_div’);
2.var mydiv_extended = $(mydiv_noextend);
(2)方法: $$

功能:通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的支持)

js 代码

1.$$(‘a’); //获取页面上所有超链接标签对象
2.$$(‘a’,’b’); //获取页面上所有超链接标签和粗体标签
3.$$(‘#my_div’); //获取id为my_div的元素
4.$$(‘#my_div a.myClass’); //获取id为my_div的元素子元素,并且这些自元素是的所有class=”myClass”的标签

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

(3)方法: inject

作用:可以用来把当前元素插入到指定元素之前(before),之中(inside),之后(after)。

java 代码

1.$(‘myDiv3’).inject($(‘myDiv1′),’before’); //把myDiv3插入到myDiv1之前

方法: injectBefore

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

js 代码

1.$(‘myDiv3’).injectBefore($(‘myDiv1’));

方法:injectAfter

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

js 代码

1.$(‘myDiv3’).injectAfter($(‘myDiv1’));

方法:injectInside

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

js 代码

1.$(‘myDiv3’).injectInside($(‘myDiv1’));

(4)方法:adopt

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

js 代码

1.$(‘myDiv’).adopt($(‘myDiv1’));
2.$(‘myDiv’).adopt(‘myDiv1’);
3.$(‘myDiv’).adopt(‘button’);

(5)方法:remove

作用:删除元素

js 代码

1.$(‘myDiv’).remove();

(6)方法:clone

参数列表:

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

作用:复制元素

js 代码

1.$(‘myDiv’).clone();
2.$(‘myDiv’).clone(false); //只复制myDiv本身,不复制其content和子元素

(7)方法:replaceWith

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

js 代码

1.var a = new Element(‘button’);
2.a.value = ‘test’;
3.$(‘myDiv1’).replaceWith($(a));

(8)方法:appendText

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

js 代码

1.$(‘myDiv1’).appendText(‘world’);

(9)方法:hasClass

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

js 代码

1.var x = $(‘myDiv1’).hasClass(‘clazz_1’);

(10)方法:addClass

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

js 代码

1.$(‘myDiv1’).addClass(‘clazz_1’);

(11)方法:removeClass

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

js 代码

1.$(‘myDiv1’).removeClass(‘clazz_1’);

(12)方法:toggleClass

作用:在addClass和removeClass的功能之间切换

(13)方法:setStyle

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

js 代码

1.$(‘myDiv’).setStyle(‘width’,’100px’);

(14)方法:setStyles

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

js 代码

1.$(‘myDiv’).setStyles({
2. border: ‘1px solid #000’,
3. width: ‘300px’,
4. height: ‘400px’
5.});
6.或者(不推荐在这种方式下设置opacity属性):
7.$(‘myDiv’).setStyles(‘border: 1px solid #000; width: 300px; height: 400px;’);
(15)方法:setOpacity

作用:设置元素的透明度

js 代码

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

(16)方法:getStyle

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

js 代码

1.var w = $(‘myDiv’).getStyle(‘width’);

(17)方法:addEvent

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

js 代码

1.$(‘myDiv’).addEvent(‘click’, function(){
2. alert(‘haha,clicked!’);
3.});

(18)方法:addEvents

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

js 代码

1.$(‘myBtn’).addEvents({
2. ‘click’: function(e){alert(‘clicked!!!’);},
3. ‘mouseout’: function(e){alert(‘mouseouted!!!’);}
4.});

(19)方法:removeEvent

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

js 代码

1.var fa = function(e){alert(‘aaaaaaaaaaaaaa’);};
2.var fb = function(e){alert(‘bbbbbbbbbbbbbb’);};
3.$(‘myBtn’).addEvent(‘click’,fa);
4.$(‘myBtn’).addEvent(‘click’,fb);
5.$(‘myBtn’).removeEvent(‘click’,fa);

(20)方法:removeEvents

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

js 代码

1.var fa = function(e){alert(‘aaaaaaaaaaaaaa’);};
2.var fb = function(e){alert(‘bbbbbbbbbbbbbb’);};
3.$(‘myBtn’).addEvent(‘click’,fa);
4.$(‘myBtn’).addEvent(‘click’,fb);
5.$(‘myBtn’).removeEvents(‘click’);

(21)方法:fireEvent

作用:触发元素的指定事件上的所有监听器方法

js 代码

1.var fa = function(e){alert(‘aaaaaaaaaaaaaa’);};
2.var fb = function(e){alert(‘bbbbbbbbbbbbbb’);};
3.$(‘myBtn’).addEvent(‘click’,fa);
4.$(‘myBtn’).addEvent(‘click’,fb);
5.$(‘myBtn’).fireEvent(‘click’); //fa和fb将立即被执行

(22)方法:getFirst

作用:获取当前元素的第一个子元素节点

js 代码

1.var f = $(‘myDiv’).getFirst();

(23)方法:getLast

作用:获取当前元素的最后一个子元素节点

js 代码

1.var l = $(‘myDiv’).getLast();

(24)方法:getParent

作用:获取当前元素的父元素节点

js 代码

1.var par = $(‘first’).getParent();

(25)方法:getChildren

作用:获取当前元素所有子元素节点

js 代码

1.var cs = $(‘myDiv’).getChildren();

(26)方法:setProperty

作用:设置元素的属性

js 代码

1.$(‘myImage’).setProperty(‘src’, ‘whatever.gif’);

(27)方法:setProperties

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

js 代码

1.$(‘myElement’).setProperties({
2. src: ‘whatever.gif’,
3. alt: ‘whatever dude’
4.});

(28)方法:setHTML

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

js 代码

1.$(‘myElement’).setHTML(newHTML);

方法:getProperty

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

js 代码

1.$(‘myImage’).getProperty(‘src’)

(29)方法:getTag

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

js 代码

1.$(‘myImage’).getTag(); //img

(30)方法:scrollTo

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

js 代码

1.window.scrollTo(0,200);

(31)方法:getValue

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

js 代码

1.var v = $(‘myInput’).getValue();

(32)方法:getSizze

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

返回值格式如下:

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

js 代码

1.$(‘myElement’).getSize();

(33)方法:getPosition

作用:获取元素的offset位置

返回值格式:

{x: 100, y:500}

js 代码

1.$(‘element’).getPosition();

(34)方法:getTop

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

js 代码

1.$(‘element’).getTop();

(35)方法:getLeft

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

js 代码

1.$(‘element’).getLeft();

(36)方法:getCoordinates

作用:获取元素的当前width, height, left, right, top, bottom值

返回值格式:

{
width: 200,
height: 300,
left: 100,
top: 50,
right: 300,
bottom: 350
}

js 代码

1.var myValues = $(‘myElement’).getCoordinates();

mootools提供了一个“垃圾收集器”Garbage。

一般情况下,使用$方法获取到的对象都会被这个“垃圾收集器”登记下来,然后在窗体关闭(unload)的时候,销毁这些登记过的对象。也可以调用Garbage.collect方法来登记,然后在你必要的时候调用Garbage.trash方法来销毁。   

打赏

转载请注明:苏demo的别样人生 » Mootools DOM操作

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情