MooTools 入门教程 (一)
本文是MooTools系列教程的第一部分,本系列教程为MooTools新手提供了一些入门的技巧,对刚刚开始接触MooTools的朋友非常有用.
本教程的其他部分稍后推出:)
MooTools 入门教程 (二)
占位二
在第一课中,我们将会学习如何操作元素的属性,如使用ID操作一个DOM元素,getStyle(),setStyle()的用法(操作元素的CSS属性),使用toInt()将string类型转换为number类型等.
1. 引入 Mootols 框架
下载最新的 MooTools 并在 <head> 里添加:
<script type=”text/javascript” src=”mootools.svn.js”></script>
2. 获得一个 DOM 元素
使用如下方法获得ID为’myElement’的DOM元素:
var element = $(’myElement’);
等同于javascript代码:
var element = document.getElementById(’myElement’);
使用 $$ 可以得到一个DOM元素内的一组元素对象,如:
$$(’#myElement li.myListElement’);
上面的代码获得ID=’myElement’里面的一组标签为 <li> 并且 class=”myListElement” 的元素.
3. setStyle() and get Style()
get和set元素属性(height, background, color…)的方法. 设置属性可以使用下面代码:
$(”myElement”).setStyle(”height”, “200px”)
也可以在一个方法里设置多个属性:
$(”myElement”).setStyles({
background: “#DEDEDE”,
border:”solid 1px #999999″,
width: “700px”
height: “80px”});
获得一个属性的值使用getStyle()方法:
$(”myElement”).getStyle(”height”)
上面代码返回 ID=”myElement”的元素的height, 如 “200px”,如果想返回数字200,则需要使用toInt()方法:
$(”myElement”).getStyle(”height”).toInt()
4. Unobtrusive Javascript
Unobtrusive的Javascript指的是尽量令Javascript代码和页面代码分离,如使用事件机制而不是将方法的调用写在DOM中:
<script type=”text/javascript”>
window.addEvent(’domready’, function() {
//Some lines of code here…
});
</script>
给元素”myElement”添加一个click事件:
<script type=”text/javascript”>
window.addEvent(’domready’, function() {
$(’myElement’).addEvent(’click’, function() {
alert(’Hello World!’);
});
});
</script>
相应的HTML代码为:
<a href=”home.html” id=”myElement”>
Try to click here!
</a>
传统的obtrusive的写法为将click方法写在<a>标签中:
<a href=”home.html” id=”myElement” onClick=”javascript:doSomething()” >
Try to click here!</a>
实例1: 更改背景色 background color
假设有如下HTML代码:
<div id=”myLayer”>
<a href=”#” id=”myElement”>Change Background</a>
</div>
更改背景色代码:
<script type=”text/javascript”>
window.addEvent(’domready’, function() {
$(’myElement’).addEvent(’click’, function() {
$(’myLayer’).setStyle(’background’, ‘#DEDEDE’);
});
});
</script>
实例2: 更改/重置背景色
下面看一个稍微复杂一点的例子,HTML代码:
<div id=”myLayer”>
<a href=”#” id=”myElement”>Change Background</a>
</div>
Javascript 代码:
<script type=”text/javascript”>
window.addEvent(’domready’, function() {$(’myElement’).addEvent(’click’, function() {
var currentBgColor = $(’myLayer’).getStyle(’background’);
if(currentBgColor==”){
$(’myLayer’).setStyle(’background’, ‘#DEDEDE’);
} else {
$(’myLayer’).setStyle(’background’, ‘#FFFFFF’);
}});
});
</script>
下载源代码
如你所见,使用MooTools大大简化了Javascript代码,下一课我们将一起学习一些更复杂的操作DOM对象的方法,如web开发中最常用到的表单操作.敬请期待:).
