jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法

jQuery版本的网页开关灯

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cls{
      background-color: black;
    }
  </style>
</head>
<body>
<input type="button" value="开关" id="btn">
<script src="jquery-1.12.1.js"></script>
<script>
    // $("#btn").click(function(){
    //     if($("body")[0].className=="cls"){
    //        $("body")[0].className = "";
    //     }else{
    //        $("body")[0].className = "cls";
    //     }
    // });

    $("#btn").click(function(){
        // 判断body标签是否应用了cls的样式
        if($("body").hasClass("cls")){
           // 此处应用了cls类样式,那么就移除这个类样式
           $("body").removeClass('cls');
           $("#btn").val('关灯');
        }else{
           // 此处没有应用类样式,那么就应用类样式
           $("body").addClass('cls');
           $('#btn').val('开灯');
        }
    });
    
</script>
  
</body>
</html>

jQuery版本网页开关灯的另一种写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cls{
      background-color: black;
    }
  </style>
</head>
<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('关灯');
        }
    });

    // $('#btn').click(function(){
    //   // 获取按钮的value属性的值
    //   console.log($(this).val());

    //   $(this).val('哈哈,我又变帅了');
    // });
    
</script>
  
</body>
</html>

jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法

猜你喜欢