Web Development with jQuery®

Manipulating Class Names (^) ❘ 101
In the JavaScript created for Example 4-2, you attach four events to each of the four ele-
ments present in the HTML document. The fi rst event adds the class name johnLennonAlbums to the

element. jQuery adds only this class name once; if it is already present, nothing happens.
The addClass() method can take one or more class names. If you want to add multiple class names,
a space character should separate each class name.
$('button#documentAddClass').click(
function(event)
{
event.preventDefault();
$('table').addClass('johnLennonAlbums');
}
);
The hasClass() method, demonstrated by the event attached to the second element, checks
for the existence of one or more class names. If the class is present, the method returns true. If the
class is missing, the method returns false. In Example 4-2, an alert() message is displayed for each
boolean condition. The hasClass() method is the only class method jQuery provides that does not
accept multiple class names.
$('button#documentHasClass').click(
function(event)
{
event.preventDefault();
if ($('table').hasClass('johnLennonAlbums'))
{
alert('The has the class johnLennonAlbums');
}
else
{
alert('The does not have the class
johnLennonAlbums');
}
}
);
Figure 4-7 shows the alert message displayed when the class is present.
The removeClass() method is demonstrated by pressing the third element; it removes a
class if it has been added. If the class does not exist, nothing happens. Like the addClass() method,
the removeClass() method can accept multiple class names, and also like the addClass() method,
you separate multiple class names with a space character. When the class is removed, you see the
same table shown in Figure 4-5.
$('button#documentRemoveClass').click(
function(event)
{
event.preventDefault();
$('table').removeClass('johnLennonAlbums');
}
);
[http://www.it-ebooks.info](http://www.it-ebooks.info)

Free download pdf

Get our desktop app

Company

• About
• Contact
• News

Features

• Quick Start
• Desktop
• Editor

Documentation

• Support
• Pricing

Resources

• Tutorial
• Your Account

• Privacy & Policy
• /
• Terms

© ISSUHUB. 2024. All rights reserved.