摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!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="../../demo/js/jq_3.3.1_mi.js"></script>
<title>Document</title>
</head>
<body>
<script>
$(document).ready(function(){
$('div').hover(function(){
$(this).css('background','red')
},function(){
$(this).css('background','#ff6500')
})
$('button').click(function(){
$('img').toggle('src')
})
})
</script>
<div style="width:50px;height:50px;background:#ff6500;">我是正方形</div>
<div style="width:190px;height:24px;border: 1px solid #ff6500"><img src="../images/12.png" alt=""></div>
<button>点击</button>
</body>
</html>
总结:
1、案例中hover事件能使鼠标以上div上时,实现背景切换效果
2、toggle事件能实现图片的隐藏显示切换效果
批改老师:灭绝师太批改时间:2019-02-16 17:40:47
老师总结:完成的不错,作业可以将学到的知识运用到实例