4.作业--Jquery，JS

作业题目：1.使用Jquery完成点击图片变换图片颜色

A图

B代码

HTML的部分

JQ的部分

作业题目：2.使用JS中的DOM操作完成背景颜色渐变方向变换。点击背景，渐变方向发生改变。

A图

B代码

学习产出：

作业题目：1.使用Jquery完成点击图片变换图片颜色

A图

B代码

HTML的部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击图片变换图片颜色</title>
<style>.background-color {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;}
</style>
</head>
<body><div class="background-color" id="background" style="background-color: #f0f0f0;"></div><img src="D:\桌面\web\code\图片\image.jpg" id="toggleButton" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px;"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="点击图片变换图片颜色.js"></script>
</body>
</html>

JQ的部分

$(document).ready(function() {$('#toggleButton').on('click', function() {var currentColor = $('#background').css('background-color');if (currentColor === 'rgb(240, 240, 240)') {$('#background').css('background-color', 'blue'); // 切换为蓝色背景} else {$('#background').css('background-color', '#f0f0f0'); // 切换回原始背景色}});});

作业题目：2.使用JS中的DOM操作完成背景颜色渐变方向变换。点击背景，渐变方向发生改变。

A图

B代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击背景颜色渐变方向变换</title>
<style>body, html {height: 100%;margin: 0;background: linear-gradient(to right, rgb(255, 255, 255), blue);transition: background-size 1s;}
</style>
</head>
<body>
<script>document.body.addEventListener('click', function() {this.style.background = 'linear-gradient(to top, rgb(255, 255, 255), blue)';});
</script>
</body>
</html>