• Choose a category
• All
• Classic-Fiction

♦ The initialization function is created with the $(document).ready() function. This technique tells the browser to execute a function when the DOM has finished loading (so that it has access to all elements of the form) but before the page is displayed (so that any effects of the form appear instantaneous to the user).

♦ $(document) makes a jQuery object from the whole document. The entire document can be turned into a jQuery object by specifying document inside the $() function. Note that you don’t use quotation marks in this case.

♦ The function specified is automatically run. In this particular case, I want to run the changeMe() function, so I place it in the parameter of the ready() method. Note that I’m referring to changeMe as a variable, so it has no quotation marks or parentheses. (Look at Book IV, Chapter 7 for more discussion of referring to functions as variables.)

You see several other places (particularly in event handling) where jQuery expects a function as a parameter. Such a function is frequently referred to as a callback function, because it’s called after some sort of event has occurred. You also see callback functions that respond to keyboard events, mouse motion, and the completion of an AJAX request.

Alternatives to document.ready

You sometimes see a couple of shortcuts, because it’s so common to run initialization code. You can shorten

$(document).ready(changeMe);

to the following code:

$(changeMe);

If this code is not defined inside a function and changeMe is a function defined on the page, jQuery automatically runs the function directly just like the document.ready approach.

You can also create an anonymous function directly:

$(document).ready(function(){

$(“#output”).html(“I changed”);

});

I think this method is cumbersome, but you frequently see jQuery code using this technique. Personally, I tend to create a function called init() and call it with a line like this:

$(init);

I think this technique is simple and easy to understand but you may encounter the other variations as you examine code on the Web.

Investigating the jQuery Object

The jQuery object is interesting because it is easy to create from a variety of DOM elements, and because it adds wonderful, new features to these elements.

Changing the style of an element

If you can dynamically change the CSS of an element, you can do quite a lot to it. jQuery makes this process quite easy. After you have a jQuery object, you can use the css method to add or change any CSS attributes of the object. Take a look at styleElements.html, shown in Figure 2-2, as an example.

Figure 2-2:

All the styles here are applied dynamically by jQuery functions.

The code displays a terseness common to jQuery code:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

I’m a level one heading

I’m a paragraph with the id “myParagraph.”

I have a border.

I have a border too.

You find a few interesting things in this program. First, take a look at the HTML:

♦ It contains an h1 tag. I’m aware that’s not too exciting, but I use it to show how to target elements by DOM type.

♦ There’s a paragraph with the ID myParagraph. This will be used to illustrate how to target an element by