jasmine214--love

只有当你的内心总是充满快乐、美好的愿望和宁静时,你才能拥有强壮的体魄和明朗、快乐或者宁静的面容。
posts - 731, comments - 60, trackbacks - 0, articles - 0

Mootools ---DOM操作

Posted on 2010-07-19 19:47 幻海蓝梦 阅读(389) 评论(0)  编辑  收藏 所属分类: JSAjax
原文:http://www.bianceng.cn/webkf/mootools/201007/18103_2.htm
Mootools DOM操作
Ajax开发中,做的最多的就是对DOM的操作, 增删节点,设置样式等等等等,如果按照常规的javascript开发的话,工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花比较大的功夫,对我们使用频率最频繁的功能操作进行封装(其中包括修正各个浏览器之间的方法差异问题),让我们的开发事半功倍。

mootools也提供了一套非常出色的解决方案,并且更OO。

首先,之前,通常我们创建DOM节点,都使用document.createElement()方法,而我们看mootools式的创建方法:

js 代码

1.var myInput = new Element('input');
非常的优雅啊。

方法: $

美元,又见美元!

$基本上成了javascript框架中的标志性建筑了,短小精悍的语法使我们的代码看起来舒服不少,也使我们的js文件瘦了下身。

时下,各大javascript框架中都会提供$这个方法,基本上它都有按照id来获取DOM元素的功能,但各个框架在具体诠释它的时候各有不同的手法,功能的强弱上也不一样。比如prototype.js中的$可以根据给出的一个或多个id来获取这些DOM元素,而jQuery里的$更是非常强,可以按照CSS选择器的语法来获取DOM元素(其实mootools和prototype也是可以的,只不过是$$这个方法)。

这是mootools中的$()的最常用用法,它返回id为my_div的元素,并且这个元素被加上了所有mootools所进行的扩展。

js 代码

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

js 代码

1.var mydiv_noextend = document.getElementById('my_div');
2.var mydiv_extended = $(mydiv_noextend);
方法: $$

功能:通过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扩展方法=====================================

方法: 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'));

方法:adopt

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

js 代码

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

方法:remove

作用:删除元素

js 代码

1.$('myDiv').remove();

方法:clone

参数列表:

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

作用:复制元素

js 代码

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

方法:replaceWith

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

js 代码

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




只有注册用户登录后才能发表评论。


网站导航: