jQuery中的on和off事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的on和off事件</title>
       <script src="https://cdn.bootcss.com/jquery/3.2.1/core.js"></script>    
<style>
 div {
 width: 50px;
 height: 50px;
 background: red;
        }
 </style>
</head>
<body>
<div></div>
<button>点击移除事件</button>
<script>
$('div').on('mouseenter',function () {  //添加鼠标移入事件
 $(this).hide("fast") //隐藏当前元素 div
}).on('mouseleave',function () { //添加鼠标移出事件
 $(this).css({ //添加多种CSS样式
 'border-radius':'20px',  //圆角
 'background':'yellow', 
 'float':'right' //右浮动
 }).show("fast") 
})  //当mosuseenter+mouseleave和hide+show遇到的时候，由于鼠标不可能绝对静止，所以鼠标在div元素上就产生一个动画效果
$('button').click(function () {  //创建button的点击事件
 $('div').off()  //关闭div的所有效果
})
</script>
</body>
</html>
相关文章
