30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
If you haven’t already, be sure and check out yesterday’s tutorial - Day 1 - Intro to the Library. There we cover how to install Mootools 1.2 and how to call your scripts within the domready event.
Welcome to day 2 of 30 Days of Mootools 1.2 Tutorials. In this tutorial, we are going to learn several methods to select HMTL elements. In many ways, this is the basis of what Mootools is most commonly used for. After all, to create an interactive user experience out of HTML elements, you first have to get your hands on them.
The $ function is the basic selector within Mootools. With it, you can select a DOM element by ID.
//selects the element with the ID 'body_wrap'
$('body_wrap');
<div id="body_wrap"> </div>
.getElement(); extends $, allowing you to refine your selection. For example, you could select the ID body wrap with $, then select the first child anchor. .getElement(); only selects a single element and will return the first if there are multiple options. If you add a class name within .getElement();, you will get the first occurrence of an element with that class name, not an array of all elements. To select multiple elements, see getElements(); below.
//selects the first child anchor within the element with the ID 'body_wrap'
$('body_wrap').getElement('a');
//selects the element with the ID 'special_anchor' within the element 'body_wrap'
$('body_wrap').getElement('#special_anchor');
//selects the first child with the class 'special_anchor_class' within the element 'body_wrap'
$('body_wrap').getElement('.special_anchor_class');
<div id="body_wrap"> <a href="#">anchor</a> <a href="#">another anchor</a> <a id="special_anchor" href="#">special anchor</a> <a class="special_anchor_class" href="#">special anchor</a> <a class="special_anchor_class" href="#">another special anchor</a> </div>
The $$ lets you quickly select multiple elements and places them into an array (a type of list that lets you manipulate, retrieve, and reorder the list in all sorts of ways). You can select elements by name (such as div, a, img) or an ID, and you can even mix and match. And as a reader pointed out, you can do a lot more with $$ than what we are covering here.
//all divs in the page
$$('div');
//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');
<div>
<div>a div</div>
<span id="id_name">a span</span>
</div>
.getElements(); is similar to .getElement();, except it returns all elements that fit the criteria, placing them into an array. You can use .getElements(); just like you would use .getElement();.
//selects all child anchors within the element with the ID 'body_wrap'
$('body_wrap').getElements('a');
//selects all children with the class 'special_anchor_class' within the element 'body_wrap'
$('body_wrap').getElements('.special_anchor_class');
<div id="body_wrap">
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a class="special_anchor_class" href="#">special anchor</a>
<a class="special_anchor_class" href="#">another special anchor</a>
</div>
Mootools 1.2 supports several operators that allow you to further refine your selections. You can use operators within .getElements(); and include or exclude certain results. Mootools supports 4 operators, each of which can be used to select an input element by name:
= : is equal to
//selects the input with the name 'phone_number'
$('body_wrap').getElements('input[name=phone_number]');
^= : starts-with
//selects the input with a name beginning with phone
$('body_wrap').getElements('input[name^=phone]');
$= : ends-with
//selects the input with a name ending in number
$('body_wrap').getElements('input[name$=number]');
!= : is not equal to
//selects the input which is not named address
$('body_wrap').getElements('input[name!=address]');
<div id="body_wrap">
<input name="address" type="text" />
<input name="phone_number" type="text" /> <!-- all four examples would select this element -->
</div>
To use the operators, first define the element type (input), then define the attribute you would like to filter by (name), place your operator, then choose your filter string.
Use this simple selector to choose evenly ordered elements.
Note: this selector starts at 0, so the first element is even.
// selects all even divs
$$('div:even');
<div>Even</div><!-- above example would select this element --> <div>Odd</div> <div>Even</div><!-- above example would select this element --> <div>Odd</div>
Just like even, except this one selects all odd elements.
// selects all odd divs
$$('div:odd');
<div>Even</div> <div>Odd</div><!-- above example would select this element --> <div>Even</div> <div>Odd</div><!-- above example would select this element -->
With .getParent(); you can get, well, the parent of an element.
// selects the parent of the element with the ID 'child_id'
$('child_id').getParent();
<div id="parent_id"> <!-- The above would return this element -->
<div id="child_id">Even</div>
</div>
Any Mootools UI development is going to start with selectors. Here are some very simple examples of how to use selectors to manipulate DOM elements.
//set the background color of all spans to #eee
$$('span').setStyle('background-color', '#eee');
//set the background color of all odd children of #body_wrap to #eee
$$('span:odd').setStyle('background-color', '#eee');
//sets the background color of all elements with class .middle_spans to #eee
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');
<div id="body_wrap">
<span>Even</span>
<span class="middle_spans">Odd</span>
<span class="middle_spans">Even</span>
<span>Odd</span>
</div>
This is by no means an exhaustive list of Mootools 1.2 selectors, rather it is intended to get you started and to give you an idea of what Mootools has to offer. To learn more about selectors, check out some of the following areas within the docs:
Here is a great blog entry at mootools.net about the $$ selector and how diverse it is. You can do an incredible amount with this selector, and it’s worth taking a look.
Here is an experiment from the folks over at Mootools that measures how fast different libraries are able to retrieve elements. This is cool unto itself, but more valuable are all the selector examples they have there. All of the selectors featured there should work with $$.
Mootools also lets you leverage the power of pseudo selectors (as demonstrated by slickspeed). Here is the w3c’s entry on selectors, definitely worth a read over (if only for the list of selectors available to you). I am not sure if every single selector on this page is supported by the $$ Mootools selector, but most are. Would love to hear if anyone knows more details on this.
Be sure and check out tomorrow’s tutorial - Day 3 - Using Arrays.