• Choose a category
• All
• Classic-Fiction

By Root 1577 0

jQuery node. You can also make a list of jQuery nodes based on tag types, so you can have a jQuery object that stores a list of all the paragraphs on the page or all the objects with a particular class name. The jQuery object has very useful methods like html(), which is used to change the innerHTML property of an element.

The jQuery node is based on the basic DOM node, so it can be created from any DOM element. However, it also adds significant new features. This is a good example of the object-oriented philosophy.

Creating a jQuery object

You have many ways to create a jQuery object, but the simplest is through the special $() function. You can place an identifier (very similar to CSS identifiers) inside the function to build a jQuery object based on an element. For example,

var jQoutput = $(“#output”);

creates a variable called jQoutput, which contains a jQuery object based on the output element. It’s similar to the following:

var DOMoutput = document.getElementById(“output”);

The jQuery approach is a little cleaner, and it doesn’t get a reference to a DOM object (as the getElementById technique does), but it makes a new jQuery object that is based on the DOM element. Don’t worry if this is a little hard to understand. It gets easier as you get used to it.

Enjoying your new jQuery node object

Because jQoutput is a jQuery object, it has some powerful methods. For example, you can change the content of the object with the html() method. The following two lines are equivalent:

jQoutput.html(“I’ve changed”); //jQuery version

DOMoutput.innerHTML = “I’ve changed”; //ordinary JS / DOM

jQuery doesn’t require you to create variables for each object, so the code in the changeMe() function can look like this:

//build a variable and then modify it

var jQoutput = $(“#output”);

jQoutput.html(“I’ve changed”);

Or you can shorten it like this:

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

This last version is how the program is actually written. It’s very common to refer to an object with the $() mechanism and immediately perform a method on that object as I’ve done here.

Creating an Initialization Function

Many pages require an initialization function. This is a function that’s run early to set up the rest of the page. The body onload mechanism is frequently used in DOM/JavaScript to make pages load as soon as the document has begun loading. This technique is described in Book IV, Chapter 7. While body onload does this job well, a couple of problems exist with the traditional technique:

♦ It requires making a change to the HTML. The JavaScript code should be completely separated from HTML. You shouldn’t have to change your HTML to make it work with JavaScript.

♦ The timing still isn’t quite right. The code specified in body unload doesn’t execute until after the entire page is displayed. It would be better if the code was registered after the DOM is loaded but before the page displays.

Using $(document).ready()

JQuery has a great alternative to body onload that overcomes these shortcomings. Take a look at the code for ready.html to see how it works:

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

Using the document.ready mechanism

This code is much like change.html, but it uses the jQuery technique for running initialization code:

♦ The body tag no longer has an onload attribute. This is a common feature of jQuery programming. The HTML no longer has direct links to the JavaScript because jQuery