Learning jQuery: Day 1

This post starts a series on learning jQuery. It's meant for beginners to the library. jQuery has received a great deal of attention (deservedly, I assure you) but if you haven't "gotten" jQuery, you may be unsure how -- or why -- you'd use it. This series means to address that.

First, what is jQuery and why should you care about it? jQuery a library of JavaScript code that makes working with JavaScript and the various browsers' document object models (the DOM) easier. If you've been frustrated by how much code it takes to do things in JavaScript and by the different ways browsers implement both the DOM and JavaScript, you'll find that jQuery provides a terrific solution.

jQuery does a lot, but it does it in a wonderfully unobtrusive way. Rather than list all of its features, let's just dig into some code.

Let's take a simple example: you have two checkboxes: one allows the user to assign a workorder to someone else and the other allows the user to process the workorder. Checking on either one will show a short form. But it's important that the user not be able to do both -- that just wouldn't make sense.

Here's the code:

First, let's include the jQuery library. You can download the jQuery framework from jquery.com and include from your server, but perhaps a better plan is to include the code from Google's repository. In addition to the benefit of high availability through Google's extensive server network, your user's browser may already have the library in its cache.

Now, let's put this jQuery to use:

The "$" is a reference to the jQuery JavaScript object. It's often used to wrap a DOM element in a jQuery object. So $('#process') gets the DOM element with an id of "process" and wraps it in a jQuery object. (Notice the use of the CSS style selector. jQuery also works with XPath selectors.)

Why bother wrapping it? Because jQuery gives us some terrific helper methods, one of which we can see in our "toggleCheckbox" JavaScript function. In that function, we accept a DOM element wrapped in a jQuery object. Since it's a jQuery object, we can use jQuery methods, one of which is "attr".

The method, "attr", is like many other jQuery methods: when used without an argument it returns a value; when used with an argument, it sets the value.

So, jQueryDomElement.attr('disabled') returns the value of the "disabled" attribute. If a value for that attribute is provided, it sets that attribute's value. So $('#myElement').attr('disabled', 'disabled') disables the DOM element.

All that's left to notice is the "removeAttr" jQuery method that does just what it sounds like.

With a little jQuery, we were able to enable the behavior we needed. In future posts on this topic, we'll see how to use jQuery to do a good deal more client-side programming. In the meantime, if you want to check out the jQuery docs, you can find them at docs.jquery.com.