A Programmer's Introduction to jQuery

I wrote this up a while ago, I don't even remember why, but thought some people might enjoy it.

“JavaScript, Ugh.”

For many web developers, JavaScript is one of those subjects they'd rather avoid. Five years ago, the landscape of client-side scripting was pretty bleak. Browser inconsistencies, implementation bugs and numerous target platforms made developing client-side JavaScript a messy endeavor.

And then, much to the chagrin of those developers, “Web 2.0” happened. Overnight, every site on the internet began using AJAX, every feature request for a site involved something dynamic and client-side, and JavaScript development quickly became as important a skill as any server-side technology.

Enter the Libraries

As this trend continued, smart developers began longing for the level of abstraction found in most server-side environments. Just as a PHP developer could call mail() on nearly any platform and expect to have an email message sent, JavaScript developers craved this level of abstraction in their day to day work.

In response to this need, several sharp developers have responded with JavaScript libraries to fill this gap. These libraries seek to provide a uniform interface, across browser and operating system platforms, for the most common tasks that client-side scripting is called on to perform:

DOM Manipulation (moving page elements around, hiding and showing objects)
AJAX and other flavors of client-server interaction that avoid a page refresh
Animation
Rich Interfaces (drag and drop, windowing, tabs, events)
Form manipulation

Each of the popular libraries attempt to provide some or all of these capabilities, packaged in their own API.

On to jQuery

This article focuses on one of theses libraries, jQuery. jQuery design is focused on maintaining a small footprint, cross-browser compliance, and reducing the amount of code which must be written for applications. It provides abstractions for AJAX, DOM manipulation, event handling and animated effects.

Developing with jQuery depends on two basic concepts, CSS selectors and method chaining.

In most vanilla JavaScript code (which does not make use of a library), you will find code like this:

function toggle_element( element_id ) {

        var element = document.getElementById( element_id );

        if ( !element ) {

                return false;

        }

        var display = element.style.display;

        if ( !display || display == ‘block' ) {

            element.style.display = ‘none';

        }

       else {

            element.style.display = ‘block';

           }



      return true;

}

window.onload = function () {

        var toggler = document.getElementById( ‘toggle_help' );

        if ( toggler ) {

                toggler.onclick = function () { toggle_element( ‘help' ) }

        }

}

The basic idea here, is that when the page is done loading, during the window.onload event, we find the toggle_help element and attach an onclick event to it. When that element is clicked, we find the DOM element with an id of “help”, examine its current display state (the CSS attribute which controls how it is presented in the flow of the page), determine if it is currently hidden or not, and toggle its display state.

The same code, implemented with jQuery looks something like this:

 $(document).ready( function () {

        $('#toggle_help').click( function () { $('#help').toggle(); });

});

As you can see, the code is significantly shorter. Admittedly, to try and compare based on the 22 versus three line count is a bit silly, as one could easily add or subtracts line from either implementation. I think it is clear, though, which version is simpler. jQuery strives to provide an appopriate level of abstraction, simplifying the developer's task, but not obscuring it behind a heavy API.

An important example of the abstraction jQuery provides is the $(document).ready() construct. This serves as an enhanced version of window.onload. The primary enhancement is that it acts in a cross-platform way, firing as soon as the DOM of the page is ready for manipulation. This is in contrast to window.onload which can be delayed indefinitely if objects on the page load slowly or improperly (images, iframes, scripts, etc.)

CSS Selectors

As shown in the previous example, one core features of jQuery is the use of CSS selectors to find elements within the page. By now, I imagine that most web developers have had exposure to at least basic CSS, which is all you'll generally need in order to develop very useful jQuery code. The selector engine in jQuery implements CSS2 and CSS3 selectors, as well as adding a few useful extras. The following examples, outline various selectors.

Very concise selectors and code fragments are provided by the use of the $ symbol. This is not a reserved character in JavaScript, and is used in jQuery as an alias for the main jQuery object. This will be seen throughout the examples.

To start, here's the page we'll work against for these selector examples:

<html>

        <head>

                <title>Test Page</title>

        </head>

        <body>

                <div id="header">

                        <h1>Test Page</h1>

                </div>

                <div class="instructions">

                        <ul>

                                <li>Read Page</li>

                                <li>Follow Examples</li>

                        </ul>

                </div>

                <div id="mainform">

                        <form>

                                <span class="instructions">

                                        Fill out this form.

                                </span>

                                <input type="text" name="first_name" />

                                <select name="gender">

                                        <option>Male</option>

                                        <option>Female</option>

                                </select>

                        </form>

                </div>

        </body>

</html>

A simple example, find the header and slide it out of view. The # character, in front of a name is used to find an element by its id attribute. An id should be unique in a pages structure. slideUp() is an animation method which decreases the height of an element over time, until it is hidden.

$('#header').slideUp('slow');

Find the title heading of the page, and change its color. In the selector, nested elements are found by simply following one selector with another.

$('#header h1').css('color', 'red');

Remove the second element of a list. The :nth-child() selector is provided by jQuery to facilitate this. remove() takes matched elements out of the DOM.

$('#instructions ul li:nth-child(2)').remove()

Where the CSS selector concept becomes very powerful, is when you want to operate on groups of items. All methods of the jQuery object will operate across all the elements that match a given selector.

Here, we'll find all the instructions and add a class to them. addClass() is a method which adds a CSS class to the matched elements, useful to quickly change items to match a set style. An important note, regarding addClass() is that an HTML element may have more than once class, even though this is not seen very often. To match all elements which have a given class, the classname is started with a period.

$('.instructions').addClass('warning');

These are some rather simple examples, but they touch on the main principles you'll use when creating selectors for use with jQuery. Details on all the selectors available are provided in the jQuery Docs.

Method Chaining and ‘this'

One possible disadvantage to using CSS selectors, as outlined above, is that very complex selectors can become a performance bottleneck. They can also result in your code being cluttered with the same selector over and over, as you repeatedly manipulate the same elements. Two facilities help alleviate these issues.

Method Chaining

All methods of the jQuery object return themselves. This will be a familiar concept to many object-oriented programmers, but can look a bit foreign to others. The basic idea being that you need only perform a given selection operation once, and then you perform all necessary operations on that set of results.

$('.intructions').fadeIn('fast')

        .css('border', '1px solid red')

        .addClass('warning');

In this example, we find all the instructions. We cause them to appear, give them a red border and add the warning class. (Apparently, we really, really want our instructions followed) It is important to remember that this is equivalent to the following:

$('.intructions').fadeIn('fast');

$('.intructions').css('border', '1px solid red');

$('.intructions').addClass('warning');

Chaining methods in this manner allows for more concise code and snappier performance, as the selection operation need only be performed once.

‘this'

Another facility provided is the definition of this inside each jQuery method context to reflect the current element being operated on. This becomes important with more advanced concepts, as many of them rely of providing callback functions which are executed in the context of each element matched by the selector.

In this example, we find every element with the class “click_to_hide” and then attach an onclick event to it.

$('.click_to_hide').click( function () {

        $(this).hide();

});

As you can see, we are creating an anonymous function for each element, and when the element is clicked, the element will be hidden. In this instance, we wrap this in the jQuery/$ method so we have access to the hide() method. Before wrapping, this is simply a DOM Element.

AJAX and Event Handling

Two final topics I'll touch on are AJAX and event handling. jQuery provides nice abstractions for both of these, which are likely to prevent numerous bugs and speed development.

AJAX

The must-have feature for modern web sites, AJAX, is greatly simplified when using the jQuery library. Without using a library, you would be writing complex code to first instantiate a browser-specific XmlHttpRequest object, then initiating a request and writing a callback function to be triggered.

With jQuery, for the most common cases of AJAX usage, you can accomplish this with one simple line:

// Grab the content of url and inject it into #div_to_load_in

$('#div_to_load_in').load(url);

For a more complex case, where you want to manipulate or act on the result, you'll need to add a bit more code.

var url = '/update_status.php';

$.get(url, {status: $('#status_field').val(}), function (data) {

        if ( data == 'OK' ) {

                alert('Status Updated');

        }

        else {

                alert('Sorry, Status Update Failed. (' + data + ')');

        }

});

Here we're assuming the existence of a server-side script, “update_status.php”, which takes a “status” GET parameter and returns either “OK” or an error message. In this example, I also utilized the val() jQuery method which abstracts the process of obtaining the value from any form element. This includes finding the value attribute of the selected option in a <select> tag, value of a text field, or status of a checkbox.

Event Handling

Event handling in jQuery involves jQuery object methods which bind functions to events. All of these binding methods are chainable, as with the previous examples. Many of the browser-native events are simplified or enhanced, to make the script writer's life easier.

An example of this is hover() which allows you to bind a function to the movement of the mouse cursor in and out of an element. Here we add a faux caret to elements of a list as we hover over them, add a ‘selected' class, and then remove these decorations when the user's mouse moves on.

 $('li').hover(

        function () { $(this).prepend('<span>&gt;</span>').addClass('selected'); },

        function () { $(this).removeClass('selected').find('span:first').remove(); }

);

In this example, we see use of this, method chaining, and find() which allows using selectors to dig down inside of an element.

Hi, I'm Chris Moyer's Blog.