MooTools basics - useful tips

.set()

$(content).set(text,'some text'); /*text, html*/

.get()

$(content).get(text);

.getElement()

$(body_wrap).getElement('a');$(body_wrap).getElement(#special_anchor);$(body_wrap).getElement(.special_anchor_class); 

.getElements()

$(body_wrap).getElements('a');$(body_wrap).getElements(.special_anchor_class); 

.setStyle()

$(content).setStyle(background-color,#000);$(content).setStyle(color,#fff); 

.setStyles()

$(content).setStyles({background-color:#000,color:#fff});

.getStyle()

$(content).getStyle(background-color); 

.getStyles()

$(content).getStyles(background-color,color); 

new Element - Image

var images = image.jpg;new Element(img,{ src:images, width:70, height:70 }).inject($(box));
var my_img = new Element(img,{src:image.jpg,style:'width:200px;border:3px solid red'});

new Swiff - Flash

var obj = new Swiff(flash.swf, {width: 100,height: 100,container: $(flash_div),params: {wmode: opaque,bgcolor: #ff3300,menu:false }}); 

Click href link

<a class=click href='#'>link</a> 
$$(.click).addEvents({click: function(e){ /* dblclick, mouseenter, mouseleave, mouseover */new Event(e).stop();alert(OK);}}); 

Creating an new anchor with an Object

var myAnchor = new Element('a', { href: http://mootools.net, class: myClass, html: 'Click me!', text :text styles: { display: block, border: '1px solid black', background-image:url(image.png), background-position:'100px 0' }, events: { click: function(){ alert(clicked); }, mouseover: function(){ alert(mouseovered); } }});
var href = this.getElement('a').href;

window.addEvent

window.addEvent(domready, function(){fun();}); /* domready, resize, load, mousewheel, scroll */

String method: toInt

4em.toInt(); // returns 410px.toInt(); // returns 10

Events

var textArea = $(content);textArea.addEvents({keyup: function(){console.log(keyup);},keydown: function(){console.log(keydown);},blur: function(){console.log(blur);}});

Events class

this.box.addEvent(click,this.show.bind(this,a));

this.box.addEvents({click:function(){this.show(a);}.bind(this)});

this.li.each(function(el,i){/* code */},this);

Delay

(function() {$$(.alert).fade(out);}).delay(2000);