jQuery: The Birth Of Cool Javascript

John Resig had a problem. Actually he had two. Both involved the shortcomings of the DOM.

Previously I've only discussed pure Javascript, and haven't really said much about it's most common use, client side scripting for web pages. In fact, you can run Javascript programs quite happily on their own using a standalone shell or node.js or the like. When you do this, you have access to all of the Javascript features, but not the DOM. The Document Object Module is essentially an API that the browser presents to the Javascript enviroment to allow interaction with the elements of the web page.

The root of all things DOM is the document, which is basically a big Javascript object containing everything you need to know about the webpage. All of the HTML elements and CSS information is encoded in the document object.

If you poke around in a browser like Chrome, you can examine the document object and see that it contains an html element, which contains a head and a body, &c. You can find all the elements of your web page in there somewhere, though there can be quite a few levels to get through. It's not something you'd want to do by hand.

Fortunately, for John Resig and others, included in the document object is a set of functions for doing the sorts of things that web developers need to do, like finding elements of a particular type, or with a particular class or id. Unfortunately, these functions were not entirely consistent from one browser to the next. On top of that the functions are often considered a bit awkward to use, especially in hindsight.

Suppose, for example, that you want to use Javascript to modify the color of a particular html element on your page. You could use the "getElementById()" method of the document object to retrieve the particular DOM element, then modify the style property of the DOM element:

var x = document.getElementById('foo');
x.style.color = 'red';

Or perhaps you want to assign a random color to ever element of class 'bar':

var l = document.getElementsByClassName('bar');

for (var i=0; i<l.length; ++i) {
    t = l[i].inner
    l[i].style.color = randomColor();
}

Now, that's not terrible. It's pretty straightforward, and you can see the general pattern of things, but it's not terribly intuitive. John Resig's great idea was to take advantage of the terse but familiar language of CSS to describe elements in the context of accessing and modifying elements in Javascript. To further keep things compact and simple, he took advantage of the fact that '$' is a legal identifier in Javascript. Experienced C programmers (like myself) would not be likely to think of that (trust me, it's weird), but that very fact probably contributed to the fact that not many people were using it. Thus was born jQuery, using CSS query selectors to enhance Javascript's DOM API..

jQuery uses the '$' as the entry point for it's API. Thus to access a given element, you use the '$' function and pass a string that is similar to a css specifier that you would use in your style sheet. Another clever bit is that jQuery uses a form of chaining, so most functions return a jQuery object that can be further modified, but that's more details than we need right now. The important part for now is that in order to actually get an element, it uses a get function, which typically returns an array of DOM elements. Thus to access element 'foo' you would do this:

var x = $('#foo').get(0)  // return element with id 'foo'
var l = $('.bar').get()   // return array of elements with class 'bar'

In order to modify the element, we can take advantage of the aforementioned chaining.

$('#foo').css('color', 'red');

The result is code that is both significantly more compact and more readable than what is required using the default DOM api.

The other basic problem that jQuery helped to mitigate was related to the inconsistencies between different browsers. While Javascript was largely consistent between browsers, the structure of the DOM and access to it varied considerably. For example, if you want to text in a div element, on one browser you would do:

x.innerHTML = "Some new text"

while on another browser you might do:

x.innerText = "Some new text"

Or there might be new features in the API that are not available in older versions, or any number of other inconsistencies due to different browsers and different versions. jQuery makes that problem a lot easier by providing a unified way to deal with most of the common DOM accesses.

Now, John Resig may not of been the first person to think of either of these ideas, but together the two ideas were so good, and the implementation was so solid that it has become one of the most commonly used libraries in web development. There's more to jQuery than just what I've shown here, but I think this is a large part of the reason for it's well deserved success. Additionally it has spawned a plethora of related libraries which use jQuery and follow in it's philosophical and technical footsteps, including libraries to work with canvas, svg elements, animation, scrolling and lots of other interesting applications.

Check it out yourself at jquery.com.