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.