abstract：<!DOCTYPE html> <html> <head> <title>
<!DOCTYPE html>
<html>
<head>
<title>
事件操作的作业
</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js">
</script>
<style type="text/css">
#div1,#div2,#div3{width:150px;height:150px;background-color:#18C7F8;border-radius:10px;line-height:60px}
</style>
<script type="text/javascript">
$(function() {
$("#div1").mouseover(function() {
$(this).css({
"background-color": "#F987D1",
"border-radius": "75px"
})
}) $("#div1").mouseleave(function() {
$(this).css({
"background-color": "#18C7F8",
"border-radius": "10px"
})
}) $("#div2").mousedown(function() {
$(this).css({
"background-color": "#F987D1",
"border-radius": "75px"
})
}) $("#div2").mouseup(function() {
$(this).css({
"background-color": "#18C7F8",
"border-radius": "10px"
})
}) $("#div3").click(function() {
$(this).css({
"background-color": "#F987D1",
"border-radius": "75px"
})
}) $("#div3").dblclick(function() {
$(this).css({
"background-color": "#18C7F8",
"border-radius": "10px"
})
})
})
</script>
</head>
<body>
<div id="div1">
</div>
<span>
mouseover/mouseleave
</span>
<div id="div2">
</div>
<span>
mouseup/mousedown
</span>
<div id="div3">
</div>
<span>
click/dbclick
</span>
</body>
</html>理解：方法都是差不多的，按照自己需求选择！