做了一个小案例用作复习练习时使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开关灯案例</title>
<style>
img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<button>开灯</button>
<button>关灯</button>
<img src="images/python.列表切片.png" alt="">
</body>
</html>
<script src="jquery-3.6.1.js"></script>
<script>
$(function () {
//显示得有立即执行函数
//添加按钮事件,设置body的背景
//获取按钮,可以知道jQuery和DOM是可以串着用的
var btns = document.getElementsByTagName('button');
console.log(btns);
//设置关灯事件
btns[1].onclick = function () {
//因为都能获取的标签的元素最后会出现的是数组的形式,我们为了获取到准确的元素,所以我们要做到霍去病索引号的,然后安排点击时间函数
$('body').css('backgroundColor', 'black');
//可以发现jQuery和DOM修改CSS样式的方式是不同的,我们jQuery采取的是CSS相当于键值对的方式
}
$(btns[0]).click(function () {
$('body')[0].style.backgroundColor = 'white';
//此时采用不同的将jQuery转换为DOM来修改,DOM秀海样式是才去的是style链式的
//jQuery出来的是封的是包装集的格式如果想要转化为DOM那就一壶水族的形式来提取。
//click和onclick 的关系
//onclick是绑定时间当鼠标触发之后会执行是触发的事件,本身就是一个函数,点击直接触发
//click是一个方法需要来封装一个函数才能触发,click更高级但是多了一个封装函数的步骤//具有告诉唤醒的作用
})
})
</script>