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 - Creating some basic mouse effects (Page 4 of 4 )
As I mentioned in the prior section, the jQuery library permits you to create some appealing mouse over effects very rapidly by using its “addClass()” and “removeClass()” methods, covered previously.
Of course, you’ll want to see a functional example that demonstrates this concept, so below I included another code sample, which applies the aforementioned effect to a simple link. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Indeed, that’s all the source code required to create a basic mouse over effect with jQuery. However, in this case there are a couple of things that require a deeper explanation. First, you’ll surely have noticed the use of a “this” argument, which has been passed to the $() function.
What is it, really? Well, as you may have guessed, “this” simply represents the originating element that triggers a determined event, so in this particular example, it’s the link tied to the pertinent “hover()” method. It’s that simple, actually.
The rest of the example is very easy to follow. The “addClass()” and “removeClass()” methods are used first to assign a “largetext” CSS class to the link, and then for removing it from that element, thus creating a quick and dirty mouse over effect.
In addition, it’s possible to recreate the functionality of the previous example by using another handy method bundled with jQuery called “toogle(),” which permits you to alternatively call different functions associated with a particular web page element when clicking on it.
Does that sound a bit confusing? It isn't really, if you take a look at the following code sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As you can see from the above example, the “toogle()” method permits you to alternatively change the CSS class tied to the previous link, thus creating a primitive visual effect, which certainly can be improved.
This challenge will be left as homework for you, however, in case you’re interested in testing more thoroughly the “addClass()” and “removeClass()” methods explained previously. It’s going to be a fun experience, trust me!
Final thoughts
In this sixth installment of the series, I provided you with a quick overview on using the “addClass()” and “removeClass()” methods included with jQuery. As you saw earlier, they can be really useful for dynamically manipulating the CSS styles of a web document.
In the next part, I’m going to teach you how to put to work for you the robust capabilities of the jQuery library to develop Ajax-based web applications. You don’t have any excuses to miss it!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
JavaScript 
/ 3 
More Top jQuery Plugins for Menus
