mootools详细教程Word下载.docx
- 文档编号:15787560
- 上传时间:2022-11-16
- 格式:DOCX
- 页数:47
- 大小:42.46KB
mootools详细教程Word下载.docx
《mootools详细教程Word下载.docx》由会员分享,可在线阅读,更多相关《mootools详细教程Word下载.docx(47页珍藏版)》请在冰豆网上搜索。
$
代替javascript
中document.getElmentById方法.
操作元素只需要使用
$('
myElement'
)即可.
(3).增加了很多方便实用的方法,
这些方法使对
元素
的各种复杂的操作变得容易,
摈弃(应该是封装)了原来繁琐的
DOM操作.
以
appendText
为例
:
方法:
appendText
作用:
向元素添加文本节点
例子:
<
div
id="
myDiv1"
>
hello
/div>
myDiv1'
).appendText('
world'
);
//结果为:
world<
Ajax开发中,做的最多的就是对DOM的操作,增删节点,设置样式等等等等,如果按照常规的javascript开发的话,工作量大的足以搞的人头晕目眩。
所以基本上每个javascript框架都会在DOM操作上花比较大的功夫,对我们使用频率最频繁的作用操作进行封装(其中包括修正各个浏览器之间的方法差异问题)。
mootools提供了一套非常出色的解决方案,并且更OO。
创建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).
)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- mootools 详细 教程
![提示](https://static.bdocx.com/images/bang_tan.gif)