事件切换总结

原创 2019-02-16 16:48:17 264
摘要:<!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
老师总结:完成的不错,作业可以将学到的知识运用到实例

发布手记

热门词条