<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#btnAdd').click(function(){
//add class 会进行重复性判断
$('.class1').addClass("class2");
});
$('#btn_remove').click(function(){
//add class 会进行重复性判断
$('.class1').removeClass("class2");
});
$('#btn_toggle').click(function(){
//add class 会进行重复性判断
$('.class1').toggleClass("class2");
});
$('#btn_off').click(function(){
//开关样式(有则remove无则add)
$(document.body).toggleClass("night");
});
});
</script>
<style type="text/css">
/*filter IE支持*/
body{filter:gray;}
.class1{background:red;}
.class2{font-size:50px;}
.night{background:black;}
</style>
</head>
<body>
<div class="class1">您好</div>
<input type="button" value=add id="btnAdd"/>
<input type="button" value=remove id="btn_remove"/>
<input type="button" value=toggle id="btn_toggle"/>
<input type="button" value=on/off id="btn_off"/>
</body>
</html>