(thing) by Marzipants Wed Feb 18 2009 at 14:26:30

jQuery

This is a web development thing. jQuery1 is a recent and pretty neat JavaScript library written by John Resig2. There are a fair number of JavaScript libraries around3 but as I only have experience with jQuery, I'm unable to make a comparison. But if you have any thoughts, post, or message me in private – I'd be interested to hear other opinions.

What is it?

It's

Selectors

jQuery works around the idea of selectors, which are the same as they are in CSS, they even use the same syntax. Essentially, you select a bunch of DOM elements, and then apply functions to them.
You can select DOM elements based on their id attribute, their classname, their HTML tag, and it even includes some pseudo-selectors like :selected and :checked for selecting input form elements that are selected and checked, respectively.

Functions

Having selected your DOM elements, you can then do things with them. The things you can do with them are:

  • Add/Remove events(and they're normalised to the W3C model as much as possible)
  • get/set attributes and values
  • Add/edit/remove/set CSS
  • Add/append/prepend/remove/etc. html/text nodes
  • Various animation effects
  • Ajax requests

The jQuery function; the almighty $ for short

Every single thing you do with jQuery is via the jQuery() command, although for short the $ is used. Something like:
$(selector).command(arguments);
That's your basic jQuery flow, and here are some examples $("p").css("color", "red") would select every single <p> element on the page, and change its colour to red.
$("p, div, li").hide() would select every single <p>, <div> and <li> element, and hide them (set your CSS property 'display' to 'none').

Now for static web pages, this probably isn't much use. Pretty much the only reason why I can think you'd want to use jQuery on a static web page is if you wanted to take advantage of jQuery selectors to apply CSS because Internet Explorer has poor support for CSS selectors.
So something like $("input[type='text']").addClass("my_css_class_for_text_inputs") would work, whereas Internet Explorer would simply add that class to every input.

But once you start doing things dynamically (i.e. web apps) jQuery makes it so much easier. AJAX becomes easier because instead of manually creating your AJAX objects, and setting up handlers and waiting animations and so forth, jQuery will do a lot of that for you.
Examples: 

$.post("somepage.php", { datafield: datavalue }, function(results) { ... });
$.get("someotherpage.asp", function(results) { ... });

These will create a POST and GET Ajax request respectively. When the Ajax request completes, it will call your functions, which in this case are anonymous functions and whatever the page returned will be passed via the results argument, although you can call them anything you like (obviously).
In the case of POST, you can either pass it a string like "field=value&something=else", or just pass it a javascript Object and jQuery will automagically take care of encoding the values appropriately. There's also a $.ajax() command in case you want to fine tune your ajax request, like specifying error handlers, whether it's asynchronous or not etc, however often you can do this in other ways. There are some functions such as $().ajaxStart, $().ajaxStop, $().ajaxError() which are custom events that trigger whenever some Ajax request takes place.

In addition, jQuery handles XML and JSON. I personally haven't used the JSON features, however, the XML features are quite easy. An example AJAX request with XML processing would be: 

$.post("page_returning_xml.php", { name: "Marcin"}, function(xml) {
    alert( $("name", xml).text() );
});
Which should alert the value of the node "name" in your XML document. You could also have a function something like: 
function address_handler(xml)
{
    /* loops through all the address nodes in the xml document specified by xml and prints
       out their streetaddress and city element values */

    $("address", xml).each(function() {
        var the_current_address_node = $(this);
            alert(the_current_address_node.find("streetaddress"));
            alert(the_current_address_node.find("city"));
    });
}
Which would loop through all the "address" nodes in your XML document, and alert the street address and city.

Plugins4

I've barely touched the surface, really, because with a combination of selectors, events and animations you can create collapsing menus and the like. There is a lot of power in just the basic library, but plugins add a bunch of capability. Check out the official jQuery UI library5. There's also a great plugin repository, some of them for eye-candy purposes, and some for functional purposes.
Three plugins I can vouch for are the "form"6, "blockUI"7 and "tablesorter"8plugins. The "form" plugin, after you make one function call, takes a form on your page and submit it via ajax to the page specified by the action attribute of the form, by the method specified by the method attribute. Comes in handy.
The "blockUI" will (by default) fade out the browser viewport and show a please wait message, whenever an Ajax request is made.
Tablesorter, will, given a <table> element, take the headings and data and will sort the data cells when you click on the headings, and it's pretty fast too.

References

  1. http://jquery.com
  2. http://ejohn.org
  4. http://plugins.jquery.com/
  5. http://jqueryui.com/
  6. http://www.malsup.com/jquery/form/
  7. http://www.malsup.com/jquery/block/
  8. http://tablesorter.com/docs/
  9. Something else you might find useful is http://api.jquery.com

I like it! 3 C!s