操作样式的方法
addClass 添加样式
removeClass 移除样式
toggleClass 切换样式的显示
hasClass 判断是否应用了某样式
示例代码：鼠标进入每个p标签的时候通过样式方式添加高亮显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery测试</title>
<style type="text/css">
.cls{
background-color: gold;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
$(function () {
$(‘p‘).mouseover(function () {
$(this).addClass(‘cls‘).siblings().removeClass(‘cls‘);
});
});
</script>
</head>
<body>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
</body>
</html>
效果图
网页开关灯效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery测试</title>
<style type="text/css">
.cls{
background-color: #000000;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
$(function () {
$(‘#btn‘).click(function () {
$(‘body‘).hasClass(‘cls‘)?$(‘body‘).removeClass(‘cls‘):$(‘body‘).addClass(‘cls‘);
//$(‘body‘).toggleClass(‘cls‘);
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="Switch"/>
</body>
</html>
效果图
时间： 2024-10-15 07:25:08