jQuery for Programmers
Thursday, July 2nd, 2009As promised, I’ve written a brief overview of jQuery for old farts experienced programmers like me, who just need a brief overview to get them started.
The main function of jQuery is to select elements of the HTML page’s DOM tree. The jQuery function itself does this, and its arguments are selectors to specify which elements to return. The jQuery function also has an alias – the $ sign can be used instead of typing out jQuery.
To select elements based on id, use
jQuery(#id)
or
$(#id)
to return all elements with id id (cf with document.getElementById which returns the first element with the given id.
To select elements based on class name use
jQuery(.className)
or
$(.className)
to find all elements with class name className.
Note how the .id and #className formats borrow from css.
Finally you can select by tag name, thusly:
$(tagName)
where tag name is the name of the HTML tag you’re searching for – $('a') to find all anchors, for example. These can be combined in many ways, for example:
$('a.home')
to find all anchors with the class ‘home’, or
$('div.share')
all divs with the id ’share’. Or even
$('a[@href^="http://www.example.com"]')
which returns all links whose href attribute starts with http://www.example.com. Note that the @ sign is used to represent attributes, in common with XPath.
So far, so simple. Most of this functionality is equivalent to existing JavaScript functions, for example document.getElementById, although in a much simpler and easy to use format, and with a rich query language built in. The result of the query isn’t just the JavaScript object or DOM element though – it is a jQuery object with a lot of additional functionality built in. In fact it can be an array of jQuery objects which can be acted on together, similarly to the resultSet from a SQL select. There are lots of methods that can be used on the result, but here are a few of them:
alert($('a$test').html())
to generate an alert displaying the text of the link element with the id test.
$('a').html('Link1')
to change the text of all links on the page to ‘Link!’.
$('li').css({color: 'red', backgroundColor: 'blue'})
to change the css attributes of all
var c = jQuery('li$id').css('color')
to save the color of the selected element.
The most powerful feature of jQuery though, I think, is its support for Ajax. To dynamically change the content of an element with an Ajax call, just do this:
$('div#placeholder').load('/external/address.html')
invokes a call to /external/address.html and puts the resulting HTML into the div with id placeholder. How simple is that. And there are event handlers to allow this basic functionality to be modified – for example displaying loading indicators or changinh attributes to indicate success.
Events are what makes all the magic happen in jQuery – you can hook on to events for clicks, hovers, button presses, etc. and invoke functionality appropriate to that event. The most basic is the document ready event, which is accessed like this:
$(document).ready()
This is invoked when the HTML DOM has been loaded. To do something useful on document ready, for example, we could do this:
$(document).ready(function() {
$("a#link1").click( function() {
$("p.vanish").toggle(100);return false;
});
});
And if that weren’t enough there are bunch of additional packages built on top of jQuery that give a lot of great functionality for free – two that I have used recently are a carousel control and a history package that allows the back and forward button to interact with Ajax based pages. I’ve got notes on both of these that I intend to post here sometime.
This is a very short introductory overview, I hope to be able to expand it in the future, but in conclusion jQuery is a very powerful package, and what’s more it’s actually fun to use. Highly recommended.
[ad]
