More on playing with css classes using jQUery
<<<< jQuery Tutorial part 8
addClass(className)
- Simly adding a css class to the matched elements
for example
<div id='description'> Code Dairy JQuery Tutorials </div>
After calling addClass(),
$("#description").addClass('bold');
actual html will be
$<div id='description' class='bold'>Code Dairy JQuery Tutorials </div>
hasClass(className)
returns true if the given css class is present in one of the matched elements
for example
$<div id='description' class='bold'>Code Dairy JQuery Tutorials </div>
this should return true $("#description").hasClass('bold');
removeClass(className)
removes a css class if its present for the matched elements
for example
$<div id='description' class='bold'>Code Dairy JQuery Tutorials </div>
After calling removeClass(),
$("#description").removeClass('bold');
actual html will be
<div id='description'> Code Dairy JQuery Tutorials </div>
toggleClass (className)
Adds the given class if not present and removes it if it is present.
for example
$<div id='description' class='bold'>Code Dairy JQuery Tutorials </div>
After calling toggleClass(),
$("#description").toggleClass('bold');
actual html will be
<div id='description'> Code Dairy JQuery Tutorials </div>
Again calling toggleClass()
$<div id='description' class='bold'>Code Dairy JQuery Tutorials </div>
toggleClass(className,switch)
Adds the given class if the switch value is set to true, removes it if the switch value is given as false.
for example
$<div id='description' class='bold'>Code Dairy JQuery Tutorials </div>
After calling toggleClass(className,switch),
variable addOrRemove is true
$("#description").toggleClass('bold',addOrRemove);
actual html will be
<div id='description'> Code Dairy JQuery Tutorials </div>
A sample program on toggleClass() function
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
p {cursor:pointer; }
.yellowMe { background:yellow; }
</style>
<script src="jquery-1.7.1.js"></script>
</head>
<body>
<p>Click me - Welcome to jQuery Tutorials</p>
<p>Working with jQuery is nice !</p>
<script>
$("p").click(function ()
{
$(this).toggleClass("yellowMe");
});
</script>
</body>
</html>
>>>>JQuery Tutorials Part10
Thanks for reading my post. please do not hesitate to post your comments or ask any questions below ( or even you find any mistakes too 
)
0 Comments.