1、新建一个html文件，命名为test.html。
2、在test.html文件中，使用div标签创建一个模块，并设置其id属性为tid，下面将通过该id设置其css样式。
3、在css标签内，对div进行样式设置，使用width属性设置div的宽度为200px，使用height属性设置div的宽度为20px，使用background属性设置div的背景颜色为红色。
4、在css标签内，再定义一个类名为newbg的样式，使用background属性设置背景颜色为黄色。
5、在test.html文件中，给div绑定onmouseover鼠标移动事件，当鼠标移动至div时，执行myfun（）函数。
6、在test.html文件中，在js标签内，创建一个myfun（）函数，在函数内，使用getElementById（）获得div对象，通过className（newbg）设置div的新背景颜色。
Jquery 使用addClass()与removeClass()来动态的添加或移出一个css 类，例如：1.$(“#para1”).addClass('highlight')添加一个“highlight”css 类给id为para1的元素。
2.$(‘#para1’).removeClass(‘'highlight')从id为para1的元素中移出一个‘highlight’css类。
具体实例代码如下：
<html>
<head>
<styletype="text/css">
.highlight {
background:green
}
</style>
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery add / remove css class example</h1>
<pid="para1">This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>
<buttonid="addClass">Add highlight</button>
<buttonid="removeClass">Remove highlight</button>
<scripttype="text/javascript">
$("#addClass").click(function () {
$('#para1').addClass('highlight')
})
$("#removeClass").click(function () {
$('#para1').removeClass('highlight')
})
</script>
</body>
</html>
初始的效果：
点击 add highlight 后的效果图：
点击 remove highlight 后的效果图：
<!doctype html><html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{margin: 0padding:0}
ul{width:102px}
li{list-style:nonewidth:100pxheight:30pxmargin:10px}
li a{display: blockwidth:100pxheight:30pxborder:1px solid #666}
li:first-child a{background:blue}
ul:hover li:first-child a{background:#fff}
ul:hover li:hover a{background:blue}
li:hove a{background: blue}
</style>
</head>
<body>
<ul>
<li class="item item1"><a href=""></a></li>
<li class="item item2"><a href=""></a></li>
<li class="item item3"><a href=""></a></li>
<li class="item item4"><a href=""></a></li>
<li class="item item5"><a href=""></a></li>
<li class="item item6"><a href=""></a></li>
<li class="item item7"><a href=""></a></li>
<li class="item item8"><a href=""></a></li>
</ul>
</body>
</html>
