Yesterday, I began my jQuery journey. After honing my JavaScript skills over the past year or so, it became evident I needed to add a JavaScript library to my toolbox of web knowledge. I'm almost 24 hours into my endeavor and I can sum it up in a single word: . Wait, I take that back...words can't describe how awesome jQuery is! (Ok, maybe there is a little too much "man love" for a JavaScript library, but...so what!)

After downloading jQuery and reading How jQuery Works, I was intrigued. So, I decided to move onto Getting Started with jQuery. My initial thoughts were worrisome. The very first statement looked odd and didn't make much sense to me:

 $(document).ready(function() {
   // do stuff when DOM is ready
 });

Figure 1

Sure, I understood it because of the comment, but the anonymous function threw me off and so did the "$()" syntax. But the worrisome thoughts soon faded.

Since I have basic knowledge of object-oriented principles, it helped me relate the idea of "$()" being a class, which is just shorthand for jquery(). In essence, and from my understanding, jQuery() and $() are exactly the same thing. Therefore $(document).ready simply runs the "ready" method on the jQuery "document" object. Now if you aren't really familiar with what I just said, you really don't need to, as long as you follow the syntax you'll be fine.

But what about that anonymous function()? Well, that's even easier to explain. Using the above example, once the document is ready (DOM elements are available to the browser), it kicks off the anonymous function. Since it's going to run once the DOM is loaded, there's no need to name it. Looking at the original example, many of you may not have had an issue with this style, it was just strange to me since I've never used anonymous functions. Although I will say, I'm still curious as to why you can't launch events without the function(). Maybe someone can explain that further?

Enough of the nomenclature, lets get to the goods. Right off that bat the tutorial takes you into some rather useful examples. All of the following code will exist inside of Figure 1.

To start, let's assume you want to add an alert box to a link. Now sure this isn't done too often, but what if you are working on a corporate website and you want to add a disclaimer letting your visitor know they are leaving your site? Would you believe me if I told you that this was possible to accomplish in 3 lines?

$("a").click(function() {
     alert("You are now leaving www.CoryDorning.com");
});

The "a" simply represents an HTML element, and adds a click event (method) to it. It could've been a div, li, p, etc. Then you just simply add in what you want the anonymous function to do.

Try it out!

Ok, that's cool and all...but one of things I find myself doing most looking for elements within the HTML and swapping out their classes. Sometimes I want to change the color, background, position or maybe even show/hide it. This is where jQuery was going to hit or miss for my personal tests. Lucky for me, it was a HUGE hit. See for yourself:

// add class to an id
$("#myID").addClass("newClass");
 
// remove class from an id
$("#myID").removeClass("oldClass");
</code
 
I find it hard to believe you could get any easier than that! But wait...it does. jQuery adds the ability to chain methods.  The above example can simply be written as:
<code>
// add/remove class on an id
$("#orderedlist").addClass("newClass").removeClass("oldClass");

But Cory, you say, finding an element by ID isn't all that hard in JavaScript...you just use the old:

getID = document.getElementById("myID");
getID.className = "newClasss";

Well, fair enough. But how about adding a class to all the h2 tags within "myID"? In an effort not to bore you, the full JavaScript wouldn't be too incredibly hard to write, but it would quite a bit longer than doing it with jQuery. Without further ado, here's the jQuery way:

$("#myID > h2").addClass("blue").removeClass("red");

I don't know about you, but being able to write it this way is at least 10x's faster than using conventional JavaScript.

Now obviously, jQuery does dive quite a bit deeper and knowledge of JavaScript will come in handy if/when you need to write some custom functions. However, basic knowledge of the jQuery syntax allows you to do ALOT, without getting much deeper than what I've shown you. And as an added benefit, if it's this powerful, this early...I can only imagine what the possibilities are.

As I continue to navigate the world of jQuery, I'll be sure to post up some further examples/explanations for those interested. In the meantime, check out jQuery yourself. I'm positive you'll share in my excitement.