事件,动画 思维导图
1.绑定事件的两种方式
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 1.通过两种方式给div添加鼠标点击事件.
// 方法一:
// $("#da").click(function(){
// console.info("div被点击了!");
// })
// 方法二:
// $("#da").on("click",function(){
// console.info("div被点击了!");
// })
// 方法三:
// $("#da").bind("click",function(){
// console.info("div被点击了!");
// })
// 2.通过两种方式给div添加鼠标进入事件.
// 方法一:
// $("#da").mouseenter(function(){
// console.info("鼠标进来了");
// })
// 方法二:
// $("#da").mousemove(function(){
// console.info("鼠标进来了");
// })
// 3.通过两种方式给div添加鼠标离开事件.
// 方法一:
// $("#da").mouseleave(function(){
// console.info("鼠标出去了");
// })
// 方法二:
// $("#da").bind("mouseleave",function(){
// console.info("鼠标出去了");
// })
})
</script>
2.合成事件(事件切换)
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.hover:鼠标悬停合成事件
// 1.1给div添加鼠标悬停合成事件:打印内容.,
// $("#da").hover(function(){
// console.info("进来了");
// },function(){
// console.info("出去了");
// })
// 1.2给div添加鼠标悬停合成事件:显示和隐藏图片(图片一开始处于隐藏状态).
// $("#da").hover(function(){
// $("#ia").show();//显示图片
// },function(){
// $("#ia").show();//隐藏图片
// })
// 2. toggle:鼠标点击合成事件.
// 2.1给div添加鼠标点击合成事件:显示和隐藏图片(图片一开始处于隐藏状态).
// $("#da").toggle(function(){
// $("#ia").show();//显示图片
// },function(){
// $("#ia").show();//隐藏图片
})
</script>
</head>
<body>
<div id="da" style="background-color: greenyellow;width: 200px;height: 100px;">
</div>
<img src="img/5.png" id="ia" />
</body>
3.事件传播(冒泡传播)
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 1.给span添加鼠标点击事件.
// $("#sa").click(function(){
// console.info("span被点击了");
// return false;
// })
// 2.给div添加鼠标点击事件.
// $("#da").click(function(){
// console.info("div被点击了");
// return false;
// })
// 3.给body添加鼠标点击事件.
// $("boby").click(function(){
// console.info("boby被点击了");
// })
// 4.点击span,事件传播截止到span.
// 5.点击span,事件传播截止到div.
})
</script>
</head>
<body>
<div id="da" style="background-color: aqua;width: 200px;height: 100px;">
<br />
<center>
<span id="sa" style="background-color: yellow;">这是span标签</span>
<center />
</div>
</body>
4.移除事件
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
// 1.给按钮添加鼠标点击事件,且只能点击一次。
// $("#sb").click(function(){
// console.info("按钮被点击了");
// //移除按钮的鼠标点击事件
// $("#sb").unbind("click");
// $("#sb").off("click");
// })
// 2.给i按钮添加鼠标点击事件,且只能偶数次点击才有效,奇数次则失效.
// 方法一
// var i = 1;
// $("#sb").click(function(){
// //偶次数
// if(i % 2 == 0){
// console.info("被点击了!");
// }
// i++;
// })
// 方法二
// $("#sb").toggle(function(){
// //奇数次点击
// }function(){
// //偶数
// console.info("被点击了!");
// })
// 3.给按钮添加鼠标点击事件,且只能点击一次,通过函数one来完成.
// $("#sb").one("click",function(){
// console.info("被点击了!");
// })
})
</script>
</head>
<body>
<input type="button" id="sb" value="这个按钮不一般" />
</body>
5.动画-基本的动画
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 1.给隐藏按钮添加事件:使div在规定的时间内消失。
// $("#hide").click(function(){
// $("ia").hide(1000)
// })
// 2.给显示按钮添加事件:使div在规定的时间内显示。
// $("#show").click(function(){
// $("#ia").show(1000);
// })
// 3.给显示/隐藏按钮添加事件:使div在规定的时间内显示和隐藏。
// $("#toggle").toggle(function(){
// $("ia").hide(1000)
// },function(){
// $("#ia").show(1000);
// })
// 4.给隐藏按钮添加事件:使div在规定的时间内隐藏,并且显示图片ia。
})
</script>
</head>
<body>
<input type="button" value="显示" id="show" />
<input type="button" value="隐藏" id="hide" />
<input type="button" value="显示/隐藏" id="toggle" />
<div id="da" style="background-color: deeppink; width: 200px; height: 100px;">
</div><br />
<img src="img/5.png" id="ia" />
</body>
6.动画-滑动动画
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// 1.给显示按钮添加鼠标点击事件:使div在指定时间内向下显示.
$("#show").click(function(){
$("#da").slideDown(1000);
})
// 2.给隐藏按钮添加鼠标点击事件:使div在指定时间内向下隐藏.
$("#hide").click(function(){
$("#da").slideUp(1000);
})
// 3.给显示/隐藏按钮添加鼠标点击事件:使div在指定时间内向下显示和向下隐藏.
$("#toggle").toggle(function(){
$("#da").slideUp(1000);
},function(){
$("#da").slideDown(1000);
})
})
</script>
</head>
<body>
<input type="button" value="显示(向下)" id="show" />
<input type="button" value="隐藏(向上)" id="hide" />
<input type="button" value="显示/隐藏" id="toggle" />
<div id="da" style="background-color: deeppink; width: 240px; height: 500px;">
</div>
</body>
7.动画-淡入淡出动画
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// 显示(淡入)
$("#show").click(function(){
$("#da").fadeIn(1000,function(){
alert("事件");
});
})
// 隐藏(淡出)
$("#hide").click(function(){
$("#da").fadeOut(1000);
})
// 显示/隐藏
$("#toggle").toggle(function(){
$("#da").fadeIn(1000);
},function(){
$("#da").fadeOut(1000);
})
})
</script>
</head>
<body>
<input type="button" value="淡入" id="show" />
<input type="button" value="淡出" id="hide" />
<input type="button" value="淡入/淡出" id="toggle" />
<div id="da" style="background-color: deeppink; width: 240px; height: 500px;">
</div>
</body>
8.自定义动画
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// 放大
$("#big").click(function(){
$("#da").animate({
width:450,
height:450
},1000)
})
// 缩小
$("#small").click(function(){
$("#da").animate({
width:300,
height:300
},2000)
})
// 往右移动
$("#right").click(function(){
$("#da").animate({
left:+=50,
},2000)
})
// 往左移动
$("#left").click(function(){
$("#da").animate({
left:-=50,
},2000)
})
// 往下移动
$("#down").click(function(){
$("#da").animate({
top:100,
},2000)
})
// 往上移动
$("#up").click(function(){
$("#da").animate({
top:10,
},2000)
})
// 斜下右移动
$("#xxy").click(function(){
$("#da").animate({
left:10,
top:10
},2000)
})
// 斜上左移动
$("#xsz").click(function(){
$("#da").animate({
left:400,
top:400
},2000)
})
});
</script>
</head>
<body>
<input type="button" value="上移" id="up" />
<input type="button" value="下移" id="down" />
<input type="button" value="右移" id="right" />
<input type="button" value="左移" id="left" />
<input type="button" value="放大" id="big" />
<input type="button" value="缩小" id="small" />
<input type="button" value="斜下右" id="xxy" />
<input type="button" value="斜上左" id="xsz" />
<div id="da" style="background-color: deeppink; width: 300px; height: 300px;position: absolute;">
</body>