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>