jQuery——帮我【关下灯】我要和cxh睡觉了

本文链接：https://blog.csdn.net/mintsolace/article/details/97525148

网页开关灯使用css方法来实现

<body>
<input type="button" value="关灯" id="btn"/>
<script src="jquery-1.12.1.js"></script>
<script>
    //表单标签DOM操作中设置和获取value属性的值→对象.value
    //jQuery中：
    /*
    *jQuery对象.val();--表示的是获取该元素的value属性值
    *jQuery对象.val("值")--表示设置该元素的value属性
    *jQuery对象.css("css的属性名字","属性的值");——>设置元素的样式属性值
    *注意：
    *.css("属性","值");属性的写法可以是DOM操作中的js写法，也可以是css中的写法
     */
    //根据id属性值获取按钮，注册点击事件(调用点击事件的方法)
    $("#btn").click(function(){
        //判断这个按钮的值来修改body样式
        //此处的this是当前的按钮DOM对象
        //判断按钮的value值是不是关灯
        if($(this).val()=="关灯"){
            //修改body的背景颜色
            $("body").css("backgroundColor", "black");
            $(this).val("开灯");
        }else{
            $("body").css("backgroundColor","");
            $(this).val("关灯");
        }
    });
</script>

通过操作类样式来实现

    <style>
        .cls{
            background-color: black;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        //第一种
        $(function(){
            $("#btn").click(function(){
                //判断body是否应用了cls类样式，如果应用了就移除，否则就添加
                if($("body").hasClass("cls")){
                    $("body").removeClass("cls");
                }else{
                    $("body").addClass("cls");
                }
            });
        });
        //第二种：切换——类样式
        $(function(){
        	$("#btn").click(function(){
				$("body").toggleClass("cls");
			});
		});
    </script>
</head>
<body>
<input type="button" value="开/关" id="btn"/>
<div id="dv"></div>
</body>