本文介绍了如何使用jQuery创建一个开关灯案例，通过点击按钮切换页面背景颜色。首先在HTML中添加按钮，然后设置样式类，引入jQuery库，最后编写jQuery代码，在点击事件中判断并切换body元素的背景颜色。
这次我们学习的是用jQuery方法写快关灯案例，快关灯案例也就是点击按钮后切换页面的背景颜色，当我们去写案例的时候多数会使用到插件，而jQuery就是其中一种要使用插件的方法。
1.首先把快关按钮写上
<body>
<input type="button" value="开/关" id="btn">
</body>
2.把样式类设置好
<style>
.cls {
background-color: black;
}
</style>
3.带入jQuery插件
<script src="./jquery-1.12.2.js"></script>
4.写上页面加载事件后把要变更背景颜色的对象带入点击事件做判断，判断对象是否应用了样式类，若应用了就移除则添加
$(function(){
$("#btn").click(function(){
// 判断body是否应用了cls这个样式类,应用了就移除,没有就添加
if($("body").hasClass("cls")){
$("body").removeClass("cls");
}else{
$("body").addClass("cls");
};
});
})
总结：主要的方法是jQuery在点击事件内加入if…else判断;注意： hasClass() 判断, addClass() 添加,removeClass() 移除,toggleClass() 切换;等方法属于知识点要注意。
这是我所学到的jQuery案例，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！
扫一扫
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
