jQuery – Explaining Last Week’s Code

ka_vol1_070 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.

 

Other post in jQuery

Related Post

  • jQuery Simple SelectorsjQuery Simple Selectors Last week we started looking at the jQuery selector by looking at the syntax we used to get our "hello world" demo working. Today, we'll start digging a little deeper into this main feature of ...
  • jQuery – Loading Partial ContentjQuery – Loading Partial Content In previous posts, I've covered the core architecture of jQuery.  How it works.  How you call methods.  A brief overview of what's available. From here on out, we will focus more on...
  • jQuery Selectors – Looks just like CSSjQuery Selectors – Looks just like CSS Last week we took a look at the jQuery selector syntax, which allows us to select elements by their ID, class name, or tag name. While it is pretty cool that you can select by class name, that ...
  • jQuery – Modal DialogjQuery – Modal Dialog Last week I introduced the jQuery Dialog plugin, which allows us to put various dialogs on the screen. I only gave out the basics of this flexible widget to keep things simple.  Today, I wan...
  • jQuery UI – Resizable w/ ASP.NET ThemesjQuery UI – Resizable w/ ASP.NET Themes If you've been up to the jQuery web site and looked at the documentation for resizable() you probably thought, "hey, no problem, I can do that."  Well, that's what I thought, too, until I started ...