jQuery 101: Basic examples

Okay - so you know what jQuery is, and have it installed on your site.  Now what do you do with it?

The possibilities are really limitless, but we have to start somewhere... The first thing you'll need to know is how to address what it is you're trying to act on.  Everything in jQuery is based on that.  You'll target something, then either act on it immediately or set up a function to be run later when a given event happens.  The most common of these are the click event or the hover event, but there are many more.

General coding practices

While not necessarily specific to coding jQuery, I've compiled a few tips and helpful practices that may keep you a little bit saner while you're coding javascript.  None of this is required in order to make things work, but may prevent or help you debug mistakes.

Comment more than you think you need to

Whether you're in HTML or javascript, you're bound to have multiple levels of nesting going on.  As most people do, I try to keep everything indented to show the levels of nesting.  Some editors even highlight the matching close if you click on an open (I use Notepad++ for most coding) but even still it can be tricky following your end-braces, close-DIVs and such when it gets complicated.  My professors in college drilled it into our heads, most of us ignored it at the time, but they were right.  Add more comments while you're coding than you think you will need.  Coming back to it later (even a few hours later) you may not remember what a piece of code was supposed to be doing, or why you did it that way.

Installing jQuery

You've read about jQuery and you want to install it on your site.  Now what?

Installing the library is as easy as linking in a single .js file (for the core functions) and optionally the jQuery UI library if you want to use some of the extra features.  For now we'll focus on the core library, since the technique for jQuery UI is the same.  Once the library is included on your page, you call the functions almost the same as you would with plain javascript, with the <SCRIPT> </SCRIPT> tags.  You'll want to wait for the DOM to be ready before calling your code...  In plain old javascript that was normally done like this:

<script>
   function init() {
      // Call your startup code here
   }
   window.onload = init;
</script>

What is jQuery, anyway?

According to jQuery's website:

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

Their motto is "Write less, do more" and they definitely achieve that.  What it does is allow you to use jQuery's functions, events and properties merged with (or instead of) the standard javascript code to offer more powerful features which handle issues such as error-checking, cross-browser bugs and such for you.  Because of this, your code is easier and faster to write, more thoroughly tested, and more extensible, without the need to write your own library of tools.  jQuery sits on top of javascript, extending the features without replacing them.  You can use a mixture of standard javascript and jQuery in the same page seamlessly.