<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>12.18作业</title>
<script>
$(document).ready(function () {
alert('已经准备好了，开始使用吧！')
})
</script>
<style>
.chi {
width: 960px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background-color: antiquewhite;
}
.chi img {
padding: 35px 38px;
}
.chi p {
text-align: center;
font-size: 30px;
color: springgreen;
}
</style>
</head>
<body>
<div class="chi">
<p>今天停水，出来吃火锅了！看2小家伙多爽！</p>
<img src="d1.jpg" alt="" width="400">
<img src="d2.jpg" alt="" width="400">
<button>图片背景变色 按钮1</button>
<button>图片背景变色 按钮2</button>
<button>背景色为天空蓝3</button>
<button>背景色为浅灰色4</button>
</div>
<script>
var btn = document.getElementsByTagName('button')[0]
btn.onclick = function () {
document.querySelector('img').style.backgroundColor = 'yellow'
}
var btn = document.getElementsByTagName('button')[2]
btn.onclick = function () {
document.querySelector('body').style.backgroundColor = 'skyblue'
}
var btn = document.getElementsByTagName('button')[3]
btn.onclick = function () {
document.querySelector('body').style.backgroundColor = 'darkgrey'
}
</script>
<script>
var btn = document.getElementsByTagName('button')[1]
btn.onclick = function () {
var img = document.querySelectorAll('img')
for (var i = 0; i < img.length; i++) {
img[i].style.backgroundColor = 'red'
}
}
</script>
<script>
$('img').click(function () {
$('p',document).css('color', 'red')
})
$('img').mouseenter(function () {
$(this).hide(3000)
}).mouseleave(function () {
$(this).show(3000)
})
</script>
</body>
</html>
