Developing using jQuery, Firefox and Firebug

10Its becoming more important to know jQuery. If you haven’t heard of jQuery, its one of the most commonly used javascript libraries used on the web. We use it for the corporate site, Hi, and GO. If your not a frequent developer in javaScript it can be an ordeal either re-learning what you’ve forgotten (I’m at that age) or having to learn something new for the first time.

As Douglas Adams would have said..

There are some really nice tools to get you started. If you don’t already, using Firefox as your development browser means that you can take advantage of a whole bunch of development tools, so if you haven’t already fire up this post in Firefox. One of the most famous developer tools for Firefox is Firebug. If you develop, you should use Firebug, get it and install it.

You don’t even need a site with jQuery already installed. BBC famously uses its own javaScript library (Glow), not jQuery, so go to the BBC homepage and fire up FireBug (F12) if you haven’t already done so.

If you’re new to FireBug, you may want a few minutes to explore and play (you’ll feel a little bit like the Scorcerer’s Apprentice). When you’ve finished playing; On the menu bar of Firebug you should see “Console”. Click “Console” to open it. In the bottom left hand corner enter :jQuery at the >>> prompt. As the BBC doesn’t use jQuery you should get an error telling you that jQuery isn’t defined.

John Reisig, the man behind jQuery, has created a bookmarklet called jQuerify. The bookmarklet loads jQuery to sites that don’t have jQuery (but only for your browser session). To use it just drag the jQuerify link into your browser toolbar and whilst on the BBC homepage, click it.

Now when you type jQuery at the Console, you should have access to the jQuery library. Now you can start to play with the jQuery library. For example, at the console type: jQuery(‘h2’) which gets all h2 elements on the page. Clicking the returned Object item takes you into the Document Object Model, giving access to all sorts of information about those page elements.

OK, lets do something freaky. Lets get rid of all the BBC’s h2 elements. Make sure you’re on the BBC home page, jQuerify has been clicked and go back to the console in Firebug and enter: jQuery(‘h2’).hide(2000)

This will hide all of the h2 elements on the page, but will be animated over 2 seconds so you can see them slide away. Don’t panic (you only did it in your browser)! You can re-display the elements by submitting: jQuery(‘h2’).show() You could also just refresh the browser, but you would have to re-click your jQuerify bookmarklet to continue experimenting with jQuery.

Now you can experiment with the entire jQuery library to learn many of the methods, documented on the site, just by entering code in the firebug console.