这次我们学习的是用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案例,所以我要分享给你们,希望可以帮助到你们。
以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!