For the past few years javascript libraries have dominated the market. Very rarely does a forward-facing website find itself running without the implementation of some sort of javascript library, whether that be jQuery or Mootools. These libraries make event interaction, manipulating the DOM, and ajax functions extremely easy.

First things First

Before you can make use of a library, you must first download the library (or see my other post for some cool tips). The jQuery library is available here, MooTools here, and Prototype here.

Round 1: Ready, Fight

Generally you want to run the libraries as compressed as possible (or running off of Google’s servers), and so that is what we are going to compare: compressed file sizes. Some people really don’t care much about this, but for those who do, this can be a breaking point.

• jQuery- Compressed weighs in at 54kb
• Mootools- YUI Compressed comes to 63kb

The libraries come in at just about the same weight when compressed

Round 2: DOM Manipulation

Here is the task- Select the 5th element in a list that has the id of “test-list”. Copy that list item and then append it to the end of the list. We are going to assume that the library has already been initialized ($(function(){});, ect).

Code Samples

// jQuery Demonstration
var fifth_item = $("#test-list li:nth-child(5)").html();
$("#test-list").append(fifth_item);
 
// Shorter, but less readable
$("#test-list").append($("#test-list li:nth-child(5)").html());
 
// MooTools Demonstration
var fifth_item = $("#test-list li:nth-child(5)");
var test_list = $("test-list");test_list.inject(fifth_item);

All three libraries make the DOM Manipulation simple. With these three it really comes down to comfort. Personally I am more comfortable with the jQuery way of simple DOM manipulation.