I’ve been a huge fan of jQuery for over a year now. As JavaScript frameworks go it’s light but still functional. As the ‘newbie’ I wanted to demonstrate this to the rest of New Bamboo. I know this information has been said before but below is my quick introduction to jQuery, what it’s about and how to use it.

Find Things, Do Stuff

This is the methodology behind jQuery and it’s very sensible. The whole API is geared towards selecting elements on the page and then performing actions on that collection of elements.

Finding Things

$() is the root of everything, it allows you to search the DOM for elements and wrap them in jQuery functionality, searches can be passed in as CSS selectors, XPath selectors or native DOM nodes. The return value is always a jQuery collection, regardless of whether there is 1 match, many matches or no matches. This allows you to chain methods on without having to worry about the contents of the document.

Doing Stuff

$() isn’t the only method that returns a jQuery collection, all the functions in the library work this way (with a few exceptions where it makes sense), because of this you can easily chain methods onto each other. Method chaining makes a lot of sense in jQuery as it provides a way to build up complex functionality ontop of all the matched elements. Let’s look at a simple example.

    $(‘a.button’).html(‘hello’).show()

Here we are getting all links with a class of button, then setting there html to say ‘hello’ and finally we ‘show’ the element on the page (making the assumption it was hidden to begin with).

jQuery has a rich yet simple API for ‘doing stuff’ to DOM elements, this includes:

• DOM Manipulation
• Traversal
• attribute and style getters and setters
• Events
• AJAX
• FX

Plugins

One of jQuery’s greatest strengths is it’s size. By concentrating on selecting elements and manipulating them they have managed to keep the core API lean. But when additional functionality is needed writing plugins couldn’t be easier, this is reflected in the number and quality of plugins already available on the website.

jQuery & Rails

I won’t lie to you, jQuery and rails isn’t always as natural a fit as Prototype however I think it is worth the little extra effort for the benefits of a lighter page size and truly unobtrusive JavaScript code.

If you’re a RJS fan then there is some helpful information available, and there is also some promising work going on in the jQuery community to bring Rails & jQuery closer together via a rails plugin.

Links & Downloads

• Talk@2 Presentation
• The simple example we built
• jQuery Website

The Results Are In!

As a company we have embraced jQuery in several projects recently and the results so far have been very positive so watch out for more from us in this area.