.NET Answers

Last week I left you with a chunk of code that showed you that you had successfully installed jQuery into your web application.

The code we need to discuss looks like this:

$(document).ready(function() {
    alert("jquery is working");
});

The first piece of code we need to examine is the document selector:

$(document)

The $(…) syntax is called a selector. In this case we are telling the selector to find the document. We can tell it to find other things as well. Tags, IDs, all items with a specific class. But today we are selecting the document object.

Since selecting the document is a pretty common activity, you may also see it abbreviated:

$()

The second hunk of code we need to examine should be pretty familiar if you have done any recent work in javascript:

function() {
    alert("jquery is working");
}

This is a standard pseudo function. Pseudo functions are handy when we need to pass a pointer to a function into another javascript function but that is the only place we are going to need it. Most of the time a startup script fits that description.

Last is the .ready event handler.

Event handler?

Yep. One of the features jQuery gives us is the ability to add on events to some of the standard events we’ve been using.

In this case, we have a ready event that takes a pointer to a function as a parameter.

This is similar, but significantly different from, the onload event you may be used to. If you need to use the onLoad event handler, you use the jQuery load event handler instead.

What’s the difference?

The load event fires once the document has loaded. But have you ever had a timing error where the document was loaded but the DOM wasn’t ready to process? That’s what the .ready handler is for. It only fires once everything is ready to be processed.

It’s a minor difference to be sure, but it solves a ton of problems.

The .ready event is also so familiar that we can short-cut it with the selector.

$(function() {
    alert("jquery is working");
});

I’m sure there are all kinds of religious discussions on the web about what the most readable syntax is. Personally, I would argue that they are all readable once you know how to read them.

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Related Post

• jQuery - Loading Partial Content
• jQuery Simple Selectors
• jQuery - Positioning Elements