I’ve been told that jQuery has been around since January of 2006. At some point during the last year, many developers within the Ruby community began to embrace it as an alternative to Prototype and Scriptaculous. Many of the programmer friends I look up to in the Merb community, specifically, are big advocates of jQuery.

So this post is an attempt at summarizing the strengths I’ve found in jQuery as opposed to the two other javascript libraries that I’ve worked closely with: mooTools and Prototype / Scriptaculous. My motivation for this is a soon-to-be-made decision regarding the javascript library that will be used in a browser-based application that I’m working on at a company in Chicago. The application needs a simple user interface and fairly powerful front-end. I’ve advocated the use of jQuery, and thought it would be useful to set out the reasons for my preference here on the InquiryLabs blog.

jQuery is well-documented

There is a fine set of documentation at jquery.com. Scriptaculous hasn’t seen much improvement in its documentation in over a year. Prototype’s documentation is (in my opinion) pretty, but still lacking.

jQuery is concise

It uses as its central paradigm the idea of “querying” the DOM for the desired elements and returning a collection (like a dataset, but with DOM elements) and then acting on the result, or set of elements. The reason it can be concise is that the element sets are chainable. For example:

document.ready(function() {
  for (var i = 0; i <= 6; i++)
    $(‘h‘ + i + ‘ [@id]‘).each(function() {
      $(‘<a class=”anchorlink”>\u00B6</a>‘).
        attr(‘href‘, ‘#‘ + this.id).
        attr(‘title‘, ‘Permalink to this headline‘).
        appendTo(this);
    });
});

(Hat tip, lucumr) In the above example, anchor tags are added to all headlines in the document. Note the clever use of chaining which reduces the size of the code, yet retains its expressiveness.

jQuery is easily extended

Whether it’s a simple function or an entire plugin, jQuery is built for extending. The ability to query for “element sets” and then act directly on those results is not limited by the core code. Since it’s so easy to add custom functions to element sets, it becomes natural. For example, I found that I often needed to add or subtract a value from a CSS property. I solved this problem by extending the jQuery core element set, like so:

jQuery.fn.cssDelta = function(property, delta) {
  var value = parseInt(this.css(property));
  return this.css(property, (value + delta) + “px“);
};

Using the above code, I can query for a set of elements and adjust the height property (for example) in one fell swoop. This will now add 5 pixels to the height of each “rack-item” element:

$(‘.rack-item‘).cssDelta(‘height‘, 5);

jQuery is small

According to Jeff Robbins and John Resig, the Drupal team chose it over Prototype because it is a mere 15k compared to Prototype’s 80k. The Dojo library is even larger.

Update:I decided to test this out myself to see what results I’d get. Resig’s comment was probably from jQuery’s earlier days when it was a micro framework. As far as I understand, it’s still possible to compress the jQuery library down to 18k or so, but that’s possible for Prototype, too. In fact, my tests show that un-gzipped, compressed code gets both down to 51k using Dojo’s ShrinkSafe online app.

Update 2:Thanks to Peter Higgins below for commenting on the size of Dojo. For comparison, its compressed (but un-gzipped) size is 77k.

jQuery has broad acceptance

Feedburner, Technorati, Drupal, Edgewall Trac, etc.

Contrasting Prototype

Here are some examples of the concise nature of jQuery, taken from the jQuery blog:

// AJAX Updater in Prototype:

new Ajax.Updater(‘placeholder‘, url, { method: ‘get‘, parameters: par });

// AJAX Updater In jQuery:

$(‘#placeholder‘).load(url + par);

// Note: This example doesn’t deal with the obvious
// iteration benefits we get if we wanted to load the
// response into every <p> object, for instance.

// Adding a class to an element in Prototype:

Element.addClassName(‘element‘, ‘className‘);

// Adding a class to an element in jQuery:

$(‘#element‘).addClass(‘className‘);

// Adding a class to a group of elements in Prototype:

$$(‘.element‘).each(function(node) {
  Element.addClassName(node, ‘className‘);
}

// Adding a class to a group of elements in jQuery:

$(‘.element‘).addClass(‘className‘);

“That last one is the clearest example of the difference in methodology. Because jQuery is passing messages to jQuery objects, the code is barely changed. jQuery doesn’t care that we’re now adding a class to a group of objects instead of one object; the underlying code is the same (add the class to the set of elements in the object). Prototype, on the other hand, requires an iterator.”

“And as your code becomes more complex, jQuery’s scales easily, while nested loops become the norm in frameworks like Prototype.”