2.Html文件格式要設為strict，有些MooTools的功能需要這樣設定在瀏覽器中才會正常運作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3.DomReady取代onload，這和jQuery類似。
/*
MooTools DomReady.
Two Styles.
1. Call the function directly.
2. The function is inside of anonomos function.
*/
window.addEvent('domready', myFunction);
//Or.
window.addEvent('domready', function(){
myFunction();
});
function myFunction() {
alert("The DOM is ready.");
}
MooTools DomReady.
Two Styles.
1. Call the function directly.
2. The function is inside of anonomos function.
*/
window.addEvent('domready', myFunction);
//Or.
window.addEvent('domready', function(){
myFunction();
});
function myFunction() {
alert("The DOM is ready.");
}
4.「$」符號的用法，用來取代document.getElementById的簡短用法，或是延申（Extends）元素可以有MooTools的元件方法。jQuery或Prototype都是類似的用法。
var myElement = $('title');
myElement.set('html', "Changed!");
myElement.set('html', "Changed!");
5.「$$」符號的用法，用來取代getElementsByClass的簡短用法，回傳值可能是一個陣列或集合。可以用來回傳一個標籤（Tag）或CSS選定的元素集合。
// Simple
$$('a'); // Returns all anchor elements in the page
$$('a', 'b'); // Returns anchor and bold tags on the page
// The Examples Below require 'Selectors' to be in your mootools file.
$$('#myElement'); // Returns an array containing only the element with the id 'myElement'
$$('#myElement a.myClass'); // Returns an array of all anchor tags with the class 'myClass' within the DOM element with id 'myElement'
// Complex Example
$$('a', '#myid, #myid2, #myid3', document.getElementsByTagName('div')); // Returns an array of all selectors passed in, going from left to right.
$$('a'); // Returns all anchor elements in the page
$$('a', 'b'); // Returns anchor and bold tags on the page
// The Examples Below require 'Selectors' to be in your mootools file.
$$('#myElement'); // Returns an array containing only the element with the id 'myElement'
$$('#myElement a.myClass'); // Returns an array of all anchor tags with the class 'myClass' within the DOM element with id 'myElement'
// Complex Example
$$('a', '#myid, #myid2, #myid3', document.getElementsByTagName('div')); // Returns an array of all selectors passed in, going from left to right.
6.addEvent函式，可用來加入事件的產生。（Javascript的事件列表）
$('header').addEvent('click', function(){
$('header').setStyle('border','1px solid white');
alert('You clicked me!');
});
$('header').setStyle('border','1px solid white');
alert('You clicked me!');
});
7.事件的停止方式。使用stop函式可以停止事件，也可以阻止a錨點向外連結。
/*
Stopping DOM Events Syntax
1. e.stop;
2. return false;
*/
$('element').addEvent('click', function(e){
e.stop();
});
// Or.
$('element').addEvent('click', function(){
return false;
});
Stopping DOM Events Syntax
1. e.stop;
2. return false;
*/
$('element').addEvent('click', function(e){
e.stop();
});
// Or.
$('element').addEvent('click', function(){
return false;
});
8.元素存取器（Element Getters）可以存取某個元件素的屬性值，不論是屬於DOM還是非DOM的都可使用，這個是具有跨瀏覽器的特點，原來的屬性值並不會被破壞，而且是接近物件導向的方式。
var tag = $('header').get('tag');
9.元素設定器（Element Setters）可以設定某個元件素的屬性值，不論是屬於DOM還是非DOM的都可使用，這個是具有跨瀏覽器的特點，原來的屬性值並不會被破壞，而且是接近物件導向的方式。
/*
The Element Setters Syntax
1. Two Propeties
2. One Object
*/
// Set One Property
$('element').set('property', 'value');
// Set Many Properties
$('element').set({
'class': 'important',
'id': 'header2'
});
The Element Setters Syntax
1. Two Propeties
2. One Object
*/
// Set One Property
$('element').set('property', 'value');
// Set Many Properties
$('element').set({
'class': 'important',
'id': 'header2'
});
10.元素消去器（Element Erasers）可以消去某個元件素的屬性值
$('element').erase('property');
11.其他的元素處理函式
/*
Set an Element's inner HTML.
*/
$('element').set('html', '<p>HTML was set!</p>');
/*
Set an Element's Style.
*/
$('element').setStyle('color','red'); // Set the element's color CSS property to read. (It's text will be red.)
/*
Set an Element's Styles.
*/
$('element').setStyles({
'border': '1px solid #000', // Set a border
'width': 300, // and the width,
'height': 400 // and finally the height. Notice there is no comma!
});
Set an Element's inner HTML.
*/
$('element').set('html', '<p>HTML was set!</p>');
/*
Set an Element's Style.
*/
$('element').setStyle('color','red'); // Set the element's color CSS property to read. (It's text will be red.)
/*
Set an Element's Styles.
*/
$('element').setStyles({
'border': '1px solid #000', // Set a border
'width': 300, // and the width,
'height': 400 // and finally the height. Notice there is no comma!
});
