• Choose a category
• All
• Classic-Fiction

1. Load the Google API from Google.

Use the first

Basic jQuery demo

If you’re already knowledgeable about jQuery, you may be horrified at my use of body onload in this example. jQuery provides a wonderful alternative to the onload mechanism, but I want to introduce only one big, new idea at a time. The next example illustrates the jQuery alternative to body onload and explains why it is such an improvement.

The basic features of changeme.html are utterly unsurprising:

♦ The HTML has a div named output. This div initially says, “Did this change?” The code should change the content to something else.

♦ The HTML calls a function called changeMe() when the body finishes loading. This is a mechanism used frequently in DOM programming, although you see a new way to call an initial function in the next section.

♦ There is a reference to the jQuery library. Any page that uses jQuery must load it using one of the mechanisms described earlier in this chapter.

♦ The changeMe() function looks really crazy. When you run the program, you can tell what it does. The code gets a reference to the output div and changes its innerHTML property to reflect a new value (“I’ve changed.”). However, the syntax is really new. All that functionality got packed into one line of (funky-looking) code.

Meet the jQuery node object

The secret behind jQuery’s power is the underlying data model. jQuery has a unique way of looking at the DOM that’s more powerful than the standard object model. Understanding the way this works is the key to powerful programming with jQuery.

The jQuery node is a special object that adds a lot of functionality to the ordinary DOM element. Any element on the Web page (any link, div, heading, or whatever) can be defined as a