mootools框架入门教程Word格式.docx
《mootools框架入门教程Word格式.docx》由会员分享，可在线阅读，更多相关《mootools框架入门教程Word格式.docx（47页珍藏版）》请在冰豆网上搜索。
创建DOM节点
var
myInput
=
new
Element（'
input'
1.
$
按照id取元素，如同document.getElmentById来获取的元素
即:
这里的
相当于
document.getElmentById,
两者功能是相同的.
//获取元素
myDiv=$（"
myDiv"
//将用getElementById获取的元素进行扩展成使用$方法获取的元素
//这样可以具备一些特殊的方法
mydiv_noextend=document.getElementById（"
mydiv"
mydiv_extended
$（mydiv_noextend）;
2.
$$
通过CSS选择器语法来获取DOM元素（需要mootools的Dom.js模块的
支持）
$$（'
a'
//获取页面上所有超链接<
a>
标签对象
'
b'
标签和粗体<
b>
标签
#my_div'
//获取id为my_div的元素
#my_div
a.myClass'
//获取id为my_div的元素子元素，并且这些
自元素是的所有class="
myClass"
的<
----------------------------------------Element扩展方法------------------------------------
3.
inject
可以用来把当前元素插入到指定元素之前（before），之中（inside），之后
（after）。
aaa<
myDiv2"
bbb<
myDiv3"
ccc<
myDiv3'
）.inject（$（'
）,'
before'
//把myDiv3插入到myDiv1之前
//结果:
4.
injectBefore
可以用来把当前元素插入到指定元素之前
（即相当于参数为'
的
inject方法）
）.injectBefore（$（'
））;
5.
injectAfter
可以用来把当前元素插入到指定元素之后
after'
的inject
方法）
）.injectAfter（$（'
6.
injectInside
可以用来把当前元素插入到指定元素之中
inside'
）.injectInside（$（'
7.
adopt
可以在当前元素中插入指定元素
（元素嵌套）
（参数可以是元素id，元素引用，html元素tag名）
myDiv'
）.adopt（$（'
）.adopt（'
button'
8.
remove
删除元素
）.remove（）;
9.
clone
参数列表：
contents：
是否连带节点的内容进行复制（deep
clone），如果不指定，则连带。
复制元素
）.clone（）;
）.clone（false）;
//只复制myDiv本身,不复制其content和子s
10.
replaceWith
用其他元素替换当前元素
abc<
a
a.value
'
test'
;
）.replaceWith（$（a））;
11.
//结果：
12.
hasClass
判断元素的class属性中是否包含指定的样式名
class="
clazz_1
clazz_2"
x
）.hasClass（'
clazz_1'
//true
13.
addClass
向指定元素上添加样式class
）.addClass（'
14.
removeClass
在指定元素上删除指定的样式class
）.removeClass（'
15.
toggleClass
在addClass和removeClass的功能之间切换
myElement"
）.toggleClass（'
myClass'
"
//再次：
16.
setStyle
向元素设置一个style属性
）.setStyle（'
width'
100px'
17.
方法:
setStyles
作业：
向元素设置多个style属性
）.setStyles（{
border:
1px
solid
#000'
width:
300px'
height:
400px'
}）;
或者（不推荐在这种方式下设置opacity属性）：
$（'
）.setStyles（'
#000;
300px;
18.
setOpacity
设置元素的透明度
）.setOpacity（0.5）;
//透明度设置为50%
19.
getStyle
获取style中指定属性的值
w
）.getStyle（'
20.
addEvent
为元素增加事件监听器
）.addEvent（'
click'
function（）{
alert（'
haha,clicked!
说明:
这里把定义事件与添加事件结合起来写是可以的,
可以提高书写效率.建议初学者先定义事件,
然后再添加事件到元素中.
方法见22:
removeEvent
结合写的顺序是:
..'
触发方式'
function（e）
{
行为
事件的行为可为空,
本例行为为:
单击弹出框
21.
addEvents
为元素增加多个事件监听器
myBtn'
）.addEvents（{
'
function（e）{alert（'
clicked!
!
},
mouseout'
mouseouted!
}
注意:
每一个事件都需要使用大括号括起来.
相当于事件数组.
22.
从元素上删除指定的监听器方法
//先定义两个事件,
同时给事件定义行为.
fa
aaaaaaaaaaaaaa'
};
fb
bbbbbbbbbbbbbb'
//添加事件.
触发方式为单击（click）.
fa）;
fb）;
//删除事件,
名为
fa,
触发方式为
单击
//（因为一个事件可能有多个触发行为）
）.removeEvent（'
，fa）;
23.
removeEvents
从元素上删除指定事件的监听器，如果不指定事件，则将删除所有事件的
监听器
）.removeEvents（'
24.
fireEvent
触发元素的指定事件上的所有监听器方法
）.fireEvent（'
//fa和fb将立即被执行
25.
getFirst
获取当前元素的第一个子元素节点
first"
first<
second"
second<
last"
last<
f
）.getFirst（）;
alert（f.id）;
//alert
26.
getLast
获取当前元素的最后一个子元素节点
l
）.getLast（）;
alert（l.id）;
27.
getParent
获取当前元素的父元素节点
par
first'
）.getParent（）;
alert（par.id）;
28.
getChildren
获取当前元素所有子元素节点
cs
）.getChildren（）;
alert（cs.length）;
3
29.
setProperty
设置元素的属性
myImage'
）.setProperty（'
src'
whatever.gif'
30.
setProperties
设置元素的多个属性
）.setProperties（{
src:
alt:
whatever
dude'
31.
setHTML
相当于设置元素的innerHTML
）.setHTML（newHTML）;
32.
getProperty
获取元素的指定属性
）.getProperty（'
）
33.
getTag
获取HTML标签元素的标签名称
img
myImage"
src="
xx.gif"
/>
）.getTag（）;
//img
34.
scrollTo
相当于把滚动条滚动到指定的状态（窗口或元素在overflow的情况下）
window.scrollTo（0,200）;
35.
getValue
获取tag为textarea,
select
或
input这三个元素的value属性值。
但
select多选状态下取值不支持。
input
type="
text"
value="
abcd"
myInput"
v
myInput'
）.getValue（）;
alert（v）;
36.
getSize
获取元素对象当前的size/scoll值
返回值格式如下：
{
scroll'
{'
x'
100,
y'
100},
size'
200,
400},
scrollSize'
300,
500}
）.getSize（）;
37.
getPosition
获取元素的offset位置
返回值格式：
{x:
y:
element'
）.getPosition（）;
38.
getTop
相当与getPosition返回的y值
）.getTop（）;
39.
getLeft
相当与getPosition返回的x值
）.getLeft（）;
40.
getCoordinates
获取元素的当前width,
height,
left,
right,
top,
bottom值
200,
300,
left:
100,
top:
50,
right:
bottom:
350
myValues
）.getCoordinates（）;
补充说明:
mootools提供了一个“垃圾收集器”Garbage。
一般情况下，使用$方法获取到的对象都会被这个“垃圾收集器”登记下来，然后在窗体关闭（unload）的时候，销毁这些登记过的对象。
也可以调用Garbage.collect方法来登记，然后在你必要的时候调用Garbage.trash方法来销毁。
高级应用举例
编辑：
ymaozi
发布时间：
2008-10-12
字号:
【大中小】
阅读次数：
103
【加入收藏夹】
相关专题：
ajax
mootools
javascript
关于Element类更全面的实例会有后续补充,请关注.
前台:
%@PageLanguage="
C#"
AutoEventWireup="
true"
CodeFile="
Default.aspx.cs"
Inherits="
_Default"
%>
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
>
headrunat="
server"
<
title>
mootools[一]--Element篇高级应用举例<
/title>
scripttype="
text/javascript"
language="
javascript"
src="
mootools-1.2-core-jm.js"
/script>
//为页添加操作事件-domready.
window.addEvent（"
domready"
function（）{
//为btnSent添加单击事件.
btnSent'
if（$（'
txtContent'
）.innerText=='
）{
alert（'
发送内容不能空！
return;
}
//Default2.aspx虚构一个页面,其实是将数据暂存,然后提取并显示在messageBox中.
varurl='
Default2.aspx'
varpostData=$（"
postMessage"
）.toQueryString（）;
newAjax（url,{method:
post'
onComplete:
messageBox'
）.innerHTML+=this.response.text;
//这里的innerHTML方法可以用setHTML代替,因为innerHTML是DOM操作中用到的,
setHTML是mootools框架中新定义的.
}）.request（postData）;
}）;
/head>
body>
divstyle="
margin:
auto;
text-align:
center;
width:
650px;
height:
700px;
divid="
messageBox"
hr/>
formid="
method="
post"
name="
runat="
div>
ul>
listyle="
list-style-type:
none;
请输入您的网名：
&
nbsp;
inputID="
txtName"
升级会员 