本文是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>