ptg16476052508 LESSON 18: Using jQuery
Using these techniques, you can build pages with expanding and collapsing lists, add bor-
ders to links when users mouse over them, or allow users to change the color scheme of
the page on-the-fly.Modifying Content on the Page
Not only can you modify the styles on the page using jQuery, but you can also modify
the content of the page itself. It provides methods that enable you to remove content from
the page, add new content, and modify existing elements.Manipulating Classes
jQuery provides a number of methods for manipulating the classes associated with ele-
ments. If your page already has a style sheet, you might want to add or remove classes
from elements on-the-fly to change their appearance. In the following example page,
shown in Figure 18.5, the class highlighted is added to paragraphs when the mouse is
moved over them, and it’s removed when the mouse moves out:
<!DOCTYPE html>
<html>
<head>
<title>Altering Classes on the Fly</title>
<style>
p { padding: .5em;}
p.highlighted { background: #666666; }
</style>
</head>
<body><p>This is the first paragraph on the page.</p>
<p>This is the second paragraph on the page.</p><script src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("p").mouseenter(function () {
$(this).addClass("highlighted");
});$("p").mouseleave(function () {FIGURE 18.4
An alert box dis-
playing the value of
a CSS property.