Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 11 ■ Using Third-Party JavaScript
As you can see, the code is amazingly short, but it’s also rather complex in terms of syntax. Let’s go through the
example bit by bit so that you can understand what is going on:
jqueryTest.js (excerpt)
$(document).ready (
function() {
The $(document).ready () method is an event handler that calls the function provided as a parameter (in
this case, an anonymous function) when the document is ready to be manipulated. This means that everything that
follows in this script is executed when the document has loaded—and that means only the document and not all the
embedded assets in it (like images). As you might remember, we talked in Chapter 5 about the ugly effect of the page
content showing up before you can hide it. This method works around that problem.
jqueryTest.js (continued)
$('pre').before('Show code');
$('pre').hide();
You take every PRE element in the document and use the before() method to add a string of HTML in the DOM
tree before this element—in this case, a paragraph with an embedded link with the class trigger. You use the hide()
method of jQuery to hide all PRE elements. (hide() sets the CSS attribute display to none .)
jqueryTest.js (continued)
$('a.trigger').toggle (
You use the CSS selector a.trigger to match all links with the class trigger (which should be only the ones
the script added via the before() method) and use the toggle() method. This method alternately executes the two
functions provided as parameters when the user clicks the element. The first parameter is an anonymous function
that shows the previously hidden code example and changes the link text to “Hide Code” and vice versa.
jqueryTest.js (continued)
function() {
$(this.parentNode.nextSibling).slideDown('slow');
$(this).html('Hide Code');
},
You can use several jQuery methods to show and hide elements, the most basic being show() and hide(). A more
advanced effect is produced using slideDown() and slideUp(), which show the element in a line-by-line animation.
Both of these methods take a parameter that indicates the speed of the animation, which can be slow, normal, or fast.
To reach the PRE element to show or hide, you need to use the $(this) construct, which returns the event target of
toggle(). This means you can use this.parentNode.nextSibling to reach the PRE, because the links are nested in
a paragraph. You can change the content of the link itself via $(this) and the html() method, which takes a string of
HTML as the sole parameter and changes the element’s innerHTML property.
www.it-ebooks.info
325