用jQuery写开关灯案例

这次我们学习的是用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案例，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！