MooTools Selectors

Selectors for DOM Elements

// get elements by class
$$('.foo'); // or even: document.getElements('.foo');

// selector with different elements
$$('div.foo, div.bar, div.bar a');

// get a single element
document.getElement('div.foo');

Ajax!

MooTools uses a Class called Request.

// create a new Class instance
var myRequest = new Request({
    url: 'getMyText.php',
    method: 'get',
    onRequest: function(){
        myElement.set('text', 'loading...');
    },
    onSuccess: function(responseText){
        myElement.set('text', responseText);
    },
    onFailure: function(){
        myElement.set('text', 'Sorry, your request failed :(');
    }
});

// and to send it:
myRequest.send(data);

To send a form it can be even more simple!

myForm.send();
// optionally you can add/change the form properties
myForm.set('send', {url: 'contact.php', method: 'get'});

How to create new DOM elements

A simple MooTools Element example.

// the short way
new Element('div#bar.foo');

// using the element constructor
new Element('div', {
    'class': 'foo',
    id: 'bar'
});

Event handlers

Attach events to be updated on what's happening!

// attach a click event o a element
myElement.addEvent('click', function(){
    alert('clicked!');
});

// attach several events at a time
myElement.addEvents({
    mouseover: function(){
        alert('mouseover');
    },
    click: function(){
        alert('click');
    }
});

You can also remove, fire or clone events!

// remove a event
myElement.removeEvent(type, fn);

MooTools Class

A simple MooTools Class example.

var Animal = new Class({
    initialize: function(age){
        this.age = age;
    }
});

var Cat = new Class({
    Extends: Animal,
    initialize: function(name, age){
        // calls initalize method of Animal class
        this.parent(age);
        this.name = name;
    }
});

var myCat = new Cat('Micia', 20);
alert(myCat.name); // alerts 'Micia'.
alert(myCat.age); // alerts 20.