mootools框架入门教程 简单.doc

mootools框架【一】-Element篇: 方法完全解析 mootools--Element篇? --内容:?封装一些常用的?DOM?操作 (1).直接可以在xhtml?中进行操作元素.?而不用嵌套在script标签中使用?javascript操作.? (2).用?$?代替javascript?中document.getElmentById方法.?操作元素只需要使用?$(myElement)即可.? (3).增加了很多方便实用的方法,?这些方法使对?元素?的各种复杂的操作变得容易,?摈弃(应该是封装)了原来繁琐的?DOM操作.?以?appendText?为例?: 方法：appendText 作用：向元素添加文本节点 例子： div?id=myDiv1hello?/div? $(myDiv1).appendText(world); ? //结果为： ???div?id=myDiv1hello?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=myDiv1aaa/div ???div?id=myDiv2bbb/div ???div?id=myDiv3ccc/div ???$(myDiv3).inject($(myDiv1),before);?//把myDiv3插入到myDiv1之前 ??? ???//结果: ???div?id=myDiv3ccc/div ???div?id=myDiv2bbb/div ???div?id=myDiv1aaa/div ? 4.?方法：injectBefore 作用：可以用来把当前元素插入到指定元素之前?(即相当于参数为before的 ???inject方法) 例子： div?id=myDiv1aaa/div div?id=myDiv2bbb/div div?id=myDiv3ccc/div ? $(myDiv3).injectBefore($(myDiv1));? ? 5.?方法：injectAfter 作用：可以用来把当前元素插入到指定元素之后?(即相当于参数为after的inject ??方法) 例子： div?id=myDiv1aaa/div div?id=myDiv2bbb/div div?id=myDiv3ccc/div ? $(myDiv3).injectAfter($(myDiv1));? ? 6.?方法：injectInside 作用：可以用来把当前元素插入到指定元素之中?(即相当于参数为inside的 ???inject方法) 例子： div?id=myDiv1aaa/div div?id=myDiv2bbb/div div?id=myDiv3ccc/div ? $(myDiv3