MooTools十天不速成-第一天

2008-08-19T06:13:00.000-07:00

1.下載MooTools

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.");
}

4.「$」符號的用法，用來取代document.getElementById的簡短用法，或是延申（Extends）元素可以有MooTools的元件方法。jQuery或Prototype都是類似的用法。

var myElement = $('title');
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.

6.addEvent函式，可用來加入事件的產生。（Javascript的事件列表）

 $('header').addEvent('click', function(){
$('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;
});

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'
});

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!
});

Eddy's Programming Blog

MooTools十天不速成-第一天