I first played with jQuery a month or so ago but it hasn’t been until recently that I’ve had a need to actually start using it in my applications. Since it was time to get reacquainted with the tool I thought I’d write a brief tutorial aimed at helping those unfamiliar with the jQuery JavaScript library.
What Is jQuery?
jQuery.com says it well…
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
Let’s Get Started
Enough mumbo-jumbo, let’s jump into things. First of all, you’ll need to download the latest jQuery compressed library from http://jquery.com/src/jquery-latest.pack.js and save it locally so you can reference it within your head tag similar to this:
<script src="your/path/jquery.js"></script>Just about everything that we would want to do with jQuery will manipulate the Document Object Module (DOM). If we try to touch the DOM before it’s appropriately loaded we’ll get some messy errors. To avoid that, the first thing we’ll want to do is have jQuery check for the DOM ready state like this:
$(document).ready(function() {
// do cool stuff only when the DOM can handle it
});Within this ready function we’ll want to load all of our handlers. jQuery uses $() as its variable reference so get used to seeing it. In this case, because document is specified in the parenthesis, jQuery will query the DOM and match the whole document to our request. Since we passed ready() to that document match, jQuery will execute whatever is within ready() when the document has finished loading.
Coding Basics Here are a few additional pointers to get up and running with jQuery courtesy of techrepublic.com:
- jQuery code starts its code blocks with a dollar sign ($).
- The dollar sign is followed by an open parenthesis.
- The parenthesis contains what you tell jQuery to find, such as what elements it should use.
- The close parenthesis is followed by any event for the specific object.
- You can define what happens with the event specified. The parenthesis following the method/event includes a function that signals what happens when the event occurs.
Keep an eye out on this webspace for some jQuery examples; but until then, here are a few examples.