(1)获取样式 attr("class")
(2)设置样式 attr("class","myclass")
(3)追加样式addClass("myclass")( 不影响其他样式 )
(4)移除样式 removeClass("myclass")
(5)切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass")
(6)判断是否存在样式: hasClass("myclass")
案例:追加,移除,切换样式。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.class1{background-color:Red;}
.class2{font-size:50px;}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#addclass").click(function () {
$("p").addClass("class2");
});
$("#removeclass").click(function () {
$("p").removeClass("class2");
});
$("#toggleclass").click(function () {
$("p").toggleClass("class2");
});
});
</script>
</head>
<body>
<p class="class1">的方式飞桑菲杰收到飞方</p>
<input id="addclass" type="button" value="追加样式" />
<input id="removeclass" type="button" value="移除样式" />
<input id="toggleclass" type="button" value="切换" />
</body>
</html>
案例:网页开关灯的效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.night{background-color:Black;}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#toggleclass").click(function () {
$(document.body).toggleClass("night");
});
});
</script>
</head>
<body>
<input id="toggleclass" type="button" value="开关灯" />
</body>
</html>
IECollection:这个软件可以让IE 6 7 8 等共存,用于调试浏览器兼容性很方便。