MooTools core has a bundled method $$() – also referred to as dollars – that selects and extends DOM elements. This is a very powerful function and will allow you to select 1 or more DOM elements using some pretty clever tricks.

When you call $$(), it will return an array of all the elements found matching your criteria. In addition to some CSS3 selectors you might have already seen, MooTools implements some custom ones that are very helpful as well.

Note: even if it only finds a single element, $$() will return an array.

Continue Reading

This post is the second in a series about getting started with MooTools.
Part 1 can be found here.

Part 2 of this series on getting started with MooTools provides some more comparisons between vanilla JavaScript and MooTools. The most striking example is the Ajax, just check out how much of a mess traditional JavaScript is!

Hopefully these examples are illustrating the benefits of using a JavaScript framework and the immense time and effort it can save you in addition to the excellent browser compatibility. Post a comment on what specific MooTools concepts you would like me to focus on for future posts.

Continue Reading

This post is the first in a series about getting started with MooTools.

The MooTools website states – “MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.”

If you are just getting started with MooTools, the syntax is quite a bit more streamlined than stock JavaScript. I wanted to provide some examples of stock JavaScript and the MooTools equivalent. In general its easier to start learning by example then once you get some of the core ideas down you can be more successful as you continue to learn MooTools. Future parts in this series will focus on the individual concepts in more details, but for now the point is to get you writing streamlined MooTools code.

Note: The MooTools docs are an excellent source for any questions you have since there is tons of great info and examples there as well.

Core and More

MooTools is split into 2 files, Core and More. The Core library is the main file for MooTools that you will always need. The More library contains additional plugins that might be useful to you. There is a More builder that allows you pick and choose what optional components you need. This way you can keep the More size down to only the extra things you need. For now, I’ll just be dealing with concepts in the Core library.

Continue Reading

MooTools has all sorts of great Element based methods. These extend the functionality you normally get when dealing with an element. Things like .set() and .get() are great at setting or getting properties or even values for an element. For a more complete list of these helpers, check out the docs at http://mootools.net/docs/core/Element/Element.

The other day I needed a quick way to change the selected item in a select list. Select lists are a little different than a normal form element since it uses a selectedIndex property instead of a value property. However, MooTools is smart enough to figure this out, so code like this still works.

Select List HTML

<select id="list">
  <option value="bender">Bender</option>
  <option value="nibbler">Nibbler</option>
  <option value="morbo">Morbo</option>
</select>

JavaScript

$('list').set('value', 'morbo');

The above line will select the third item in the list since that matches the value we passed to the .set() method. MooTools helps simplify my life.