Add a css Class Using Jquery

To use Css Class in an HTML Tag we can use a Jquery function addClass(). This function add a css class into your HTML tag.The most intresting things is that you can use this class on a eventhandler also, To get effects when a client/user response on it.
This is an example to add a css class into a Html Tag

<script type="text/javascript">
$(document).ready(function(){
$('.click').click(function(){
$('p').addClass('green');
});
});
</script>
<style type="text/css">
.green{ color:green;}
</style>

Write this code into your body tag
<button class="click">Click Me</button>

What is Jquery and How it Works

Jquery is a Library fucntion of Javascript.It's very easy to write and very much faster than Javascript. When we use onLoad event handler on body tag ,the onload function will fired when all body content will download successfully ,that means all the image should download completely,then only this event will fired.But in Jquery when your Html DOM(Document Object Model) will load completely than the Jquery function can be fired,it's no need to wait for downloading any Image.That is why it is very nuch popular than other language/script.

For example I am going to give red color into all h1 tag When this page will loaded. For that i will write

<script type="text/javascript">
$(document).ready(function(){
$('h1').css('color','red');
});
</script>

Before Run this script You need to link JQUERY Library into your page which you can get from these links
http://code.jquery.com/jquery-1.4.2.min.js
or you can use this one
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Attach any one of this script then You can see the effect only

Mouseover effect using Javascript and css

Mouse over effect can be done by css e.g(button:hover{background:red;}.But this css will not work in IE6. So it needs to use java script for mouse over effect in a button .By using Javscript it can be possible to show mouseover effect in every browser. The demo of this script is applied in the button given below.

This effect will work in every browser.The javascript of this button is given bellow

<input style="width:113px; height:31px; border:none; background:url(button.gif);" onmouseover="this.style.background='url(buttonHover.gif)';" onmouseout="this.style.background='url(button.gif)'" type="button" value="See here" />