JQuery_ Novice to Ninja - Earle Castledine [17]
color: #666666;
}
Then, back in our JavaScript file, we’ll modify the selector to use jQuery’s addClass method rather than css:
chapter_02/10_adding_classes/script.js
$('#celebs tr:even').addClass('zebra');
The result is exactly the same, but now when we inspect the table in Firebug, we’ll see that the inline styles are gone—replaced by our new class definition. This is shown in Figure 2.4.
Figure 2.4. Adding classes to table rows
That’s much better. Now, if we want to change the appearance of the zebra stripes in the future, we can simply modify the CSS file; this will save us hunting through our jQuery code (potentially in multiple locations) to change the values.
There’ll also be times when we want to remove class names from elements (we’ll see an example of when this is necessary very soon). The action to remove a class is conveniently known as removeClass. This function is used in exactly the same way as addClass; we just pass the (un)desired class name as a parameter:
$('#celebs tr.zebra').removeClass('zebra');
It’s also possible to manipulate the id attribute, or any other attribute for that matter, using jQuery’s attr method. We’ll cover this method in more detail later in the book.
Enhancing: Adding Effects with jQuery
Now you’ve reached an important milestone. You’ve learned the component parts of a jQuery statement: the selector, the action, and the parameters. And you’ve learned the steps to use the statement: make sure the document is ready, select elements, and change them.
In the following section, we’ll apply these lessons to implement some cool and useful effects—and with any luck reinforce your understanding of the jQuery basics.
Hiding and Revealing Elements
The client dislikes the disclaimer on the site—he feels it reflects badly on the product—but his lawyer insists that it’s necessary. So the client has requested that you add a button that will remove the text after the user has had a chance to read it:
chapter_02/11_hiding/index.html (excerpt)
We’ve added an HTML button on the page with an ID of hideButton. When a user clicks on this button we want the disclaimer element, which has an ID of disclaimer, to be hidden:
chapter_02/11_hiding/script.js (excerpt)
$('#hideButton').click(function() {
$('#disclaimer').hide();
});
Run this code and make sure the disclaimer element disappears when you click the hide button.
The part in this example that makes the element actually disappear is the hide action. So, you might ask, what’s all the other code that surrounds that line? It’s what’s called an event handler—an understanding of which is crucial to becoming a jQuery ninja. There are many event handlers we can use (we’ve used the click event handler here) and we’ll be using a lot of them as we move on.
Event Handlers
Event handlers are named for their function of handling events. Events are actions and user interactions that occur on the web page. When an event happens, we say that it has fired. And when we write some code to handle the event, we say we caught the event.
There are thousands of events fired on a web page all the time: when a user moves the mouse, or clicks a button, or when a browser window is resized, or the scroll bar moved. We can catch, and act on, any of these events.
The first event that you were introduced to in this book was the document-ready event. Yes, that was an event handler: when the document said, “I’m ready” it fired an event, which our jQuery statement caught.
We used the click event handler to tell jQuery to hide the disclaimer when the button is clicked:
$('#hideButton').click(function() {
$('#disclaimer').hide();
});
this
When an event fires, we will often want to refer to the element that fired it. For example, we might want to modify the button that the user has just clicked on in some way. Such a reference is available inside our event handler code via the JavaScript keyword this. To convert the JavaScript object to a jQuery object, we wrap it in the jQuery selector:
chapter_02/12_this/script.js