My first foray into the world of jQuery

Well, I've finally gotten curious enough to give jQuery a try. Don't cry Adobe - your super powerful cfajaxproxy tag along with some of your widgets (which I don't know whether to hug or strangle on an hourly basis) have and will continue to serve me well. I finished my Certified ColdFusion Expert test earlier this month and now I'm on the prowl to learn something that will prove to be useful along with being exciting, challenging and new. It doesn't appear as though this jQuery phenomenon is going anywhere - so what do I have to lose!

So, without further delay, my first crack at jQuery involves a simple animation - a toggle that will show and hide a div when I click on a link. As a preliminary footnote, I will warn anyone else who is starting to learn jQuery that if you're not currently a practitioner of css and you want to learn jQuery then you'd better make friends with css quickly - or else!

The script below is simple enough. It first registers a ready event for the document. Pay close attention to the $("a") in there. For our example, "a" is a selector. From what I can tell, selectors are a big part of the foundation that jQuery is built upon. Can you see the css shining through yet?

At any rate, we could actually make this a named selector that corresponds to the id of an element but for now, any old link that we add to this page would actually call our function and toggle the div named stuff at a rate of 100 milliseconds.

This line shown above... $('#stuff').toggle(100); is where the rubber meets the road. We're basically using jQuery's toggle effect which uses the show method if an element is hidden or uses the hide method if the element is already displayed. One other quick note, we're using a link in this example to fire the toggle when the click fires on the link. I had to throw in the return false; to stop the link from executing it's default behavior.

Visually, that quick script will give us something that looks like this...

As expected, if you click on our link then jQuery will hide the div named 'stuff'.

To show it you just click on the link again and you're toggling the div.

So really that's about it. Easier to get started with then I had thought. I'm going to start pushing myself to use jQuery wherever I can within client projects and anything else that I'm working on so hopefully I will have some real world examples to publish in the coming days. I've always found the best way to learn something is to use it!