Adding and Removing CSS Classes with the jQuery JavaScript Library
Welcome to the sixth article in a series that introduces the jQuery JavaScript library. Composed of eight approachable tutorials, this series steps you through using the most relevant methods included with the jQuery framework, complementing theory with numerous, illustrative hands-on examples.
Adding and Removing CSS Classes with the jQuery JavaScript Library - Dynamically adding a CSS class to a predefined web page element (Page 3 of 4 )
In the previous section, you hopefully learned how to use a combination of the “addClass()” and “removeClass()” methods to dynamically manipulate a CSS class assigned to a single element of a web document.
Nonetheless, the same process can be performed using more complicated selectors, which makes it much easier to change the CSS styles of multiple elements at a time. For instance, consider the following example. It assigns an “item” CSS class to all of the items of an unordered HTML list, by using the “addClass()” method that you learned previously:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h1>Basic example on using jQuery with addClass</h1>
<ul id="samplelist">
<li>This is item 1 of the list.</li>
<li>This is item 2 of the list.</li>
<li>This is item 3 of the list.</li>
<li>This is item 4 of the list.</li>
<li>This is item 5 of the list.</li>
<li>This is item 6 of the list.</li>
<li>This is item 7 of the list.</li>
<li>This is item 8 of the list.</li>
<li>This is item 9 of the list.</li>
<li>This is item 10 of the list.</li>
</ul>
</body>
</html>
As demonstrated by the above hands-on example, it’s fairly simple to assign a specific CSS class to all of the elements of a HTML list by using a complex selector. As you can see, in this specific case, the following expression:
samplelist > li
is directly passed to the $() function, meaning that all of the <li> descendant elements from a “samplelist” selector will be affected by the pertinent “addClass()” method. Definitely, this is a simple and powerful approach that can be used to manipulate the CSS styles of several sections of a web document.
However, the previous example would be rather incomplete if I didn't show you a complementary code sample which performs the opposite task. This sample would remove a CSS class from the list items shown before.
Here’s how this brand new example looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h1>Basic example on using jQuery with removeClass() method</h1>
<ul id="samplelist">
<li class="item">This is item 1 of the list.</li>
<li class="item">This is item 2 of the list.</li>
<li class="item">This is item 3 of the list.</li>
<li class="item">This is item 4 of the list.</li>
<li class="item">This is item 5 of the list.</li>
<li class="item">This is item 6 of the list.</li>
<li class="item">This is item 7 of the list.</li>
<li class="item">This is item 8 of the list.</li>
<li class="item">This is item 9 of the list.</li>
<li class="item">This is item 10 of the list.</li>
</ul>
</body>
</html>
Here you have it. By using only the pair of “addClass()” and “removeClass()” methods included with jQuery, I modified the CSS styles of an entire HTML list. Not too bad, huh?
Well, now that you’ve hopefully understood how to alter, on the fly, the CSS styles of certain elements within a web document, it’s quite possible that you’ve realized how useful this approach can be. For instance, it can be used to create different mouse over effects very quickly.
In the final section of this tutorial I’m going to teach you how to utilize the “addClass()” and “removeClass()” methods that you saw in the previous example for building a couple of basic mouse over effects that will only require a few lines of JavaScript code.
To see how this concluding example will be developed, read the next few lines.
JavaScript 
/ 3 
More Top jQuery Plugins for Menus
