大家好,我是小陽,今天我给各位带来了jQuery的事件and动画效果,希望能给个位看官带上一些帮助!
目录
一、思维导图
二、jQuery的事件
三、jQuery的动画
一、思维导图
看官们先来看看这期内容的思维导图理清一下思路,再通过我这篇文章加深并理解代码
ok,我们现在进入今日学习主题,今日主要学习的是jQuery的事件和动画
这是今日学习所需要的案例代码:
< <head>
<meta charset="utf-8">
<style type="text/css">
#aa {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;/* 绝对定位 */
top: 50px;
left: 50px;
}
p {
text-align: center;
/* 水平居中 */
background-color: cornflowerblue;
}
</style>
</head>
<body>
<button id="bbb">变变变</button>
<button id=xx>显示[展开](淡入)</button>
<button id=yy>隐藏[收缩](淡出)</button>
<button id=zz>显示/隐藏[展开/收缩](淡入/淡出)</button>
<button id="btn">点我试试</button>
<a style="text-decoration: none;" href="#">显示</a>
<div id="aa">
<br />
<br />
<p>这是一巴掌</p>
</div>
</body>
二、jQuery的事件
一、加载DOM的两种方式:
加载DOM的两种方式以及二者之间的区别:
window.onload方式
jQuery方式
1.1 window.onload方式:
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.1 加载DOM两种方式(区别)
window.onload=function(){
console.info("js方式1");
}
window.onload=function(){
console.info("js方式2");
}
window.onload=function(){
console.info("js方式3");
}
</script>
</head>
1.2 jQuery方式:
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.1 加载DOM两种方式(区别)
$(function(){
console.info("jQuery方式1")
})
$(function(){
console.info("jQuery方式2")
})
$(function(){
console.info("jQuery方式3")
})
</script>
</head>
注意:
一、引入js类库的版本区别:
window.onload 3.3版本js比jQuery要快 $(function() 1.7版本jQuery比js快 而3.3版本js比jQuery要快
二、多个window.onload方式和多个jQuery方式时的区别:
不能写多个window.onload,多个window.onload时会被覆盖
可以写多个jQuery,多个jQuery方式不会被覆盖并且都会执行
二、绑定事件两种方式
方式一:元素.on/bind("事件名",function(){})
方式二:元素.事件名(function(){})
方式一:元素.on/bind("事件名",function(){})
< <head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
$("#aa").on("click", function() {
alert("heihei")
})
})
//bind 也行
$("#aa").bind("mousemove", function() { //鼠标移上事件
alert("aaa");
})
</script>
</head>
方式二:元素.事件名(function(){})
< <head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.事件名
$("#aa").click(function() {
alert("Hilo");
})
})
</script>
</head>
注意:在jQuery1.7版本以前没有on
三、合成事件/事件切换:
hover():鼠标悬停合成事件
toggle():鼠标点击合成事件
3.1 hover():鼠标悬停合成事件:
<script type="text/javascript">
$(function() {
//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
$("#aa").hide(); //隐藏
$("a").hover(function() { //鼠标移上
$("#aa").show(); //显示
}, function() {
$("#aa").hide(); //隐藏
})
})
</script>
3.2 toggle():鼠标点击合成事件:
<script type="text/javascript">
$(function() {
//1.3 合成事件/事件切换
/--toggle()点击控制元素[div]的显示和隐藏
$("#aa").hide();//隐藏
$("a").toggle(function(){//点击一下
$("#aa").show();//显示
},function(){//再点一下
$("#aa").hide();//隐藏
})
})
</script>
注意:[版本问题] toggle在1.9版本后之后变成了动画效果
四、事件传播(事件冒泡)
传播:小-->中-->大
阻止传播:事件后面加上 return false
<script type="text/javascript">
$(function() {
//1.4 事件的传播(事件冒泡) 小p->中div->大body 由小到大传播
//分别添加点击事件
$("p").click(function(){
console.info("p被打了");
})
$("div").click(function(){
console.info("div被打了");
return false;//阻止传播
})
$("body").click(function(){
console.info("body被打了");
})
})
</script>
注意:可以用return false 来阻断传播
五、事件坐标:[了解即可 pageX,pageY]
offsetX:当前元素左上角
clientX:窗口左上角
pageX:网页左上角
5.1 事件event的坐标:
<script type="text/javascript">
$(function() {
//1.5 事件event的坐标[了解即可 pageX,pageY]
$("#aa").click(function(e){
console.info(e.pageX,e.pageY);//x,y坐标
})
})
</script>
六、移除事件
元素.unbind("事件名")
6.1 设定按钮只能点击一次 方法一:
$("#btn").on("click",function(){
//做一系列事情
console.info(44944);
//将点击事件进行移除
$("#btn").off("click");//unbind()
//将按钮禁用
$("#btn").attr("disabled",true);
})
方法二:
<script type="text/javascript">
$(function() {
//1.6 事件的移除
//--按钮只能点击一次[2]
//一次
$("#btn").one("click",function(){
console.info(44944);
//将按钮禁用
$("#btn").attr("disabled",true);
})
})
</script>
6.2 设定按钮点击偶数次可行 奇数次不行
<script type="text/javascript">
$(function() {
//1.6 事件的移除
//--按钮点击偶数次可行 奇数次不行
var i=1;
$("#btn").click(function(){
if(i%2==0){
console.info(44944,i);//做一系列事情
}
i++;
})
})
</script>
三、jQuery的动画
一、基本
显示:show(Time)
隐藏:hide(Time)
切换:toggle(Time)
1.1 显示:show(Time):
<script type="text/javascript">
$(function() {
//2.1 基本动画 [回调函数]
$("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
$("#aa").show(1000,function(){
//回调函数
alert("来了老弟")
});//1s 显示
})
})
</script>
1.2 隐藏:hide(Time):
<script type="text/javascript">
$(function() {
//2.1 基本动画 [回调函数]
$("#yy").click(function(){
$("#aa").hide(2000);//隐藏
})
})
</script>
1.3 切换:toggle(Time):
<script type="text/javascript">
$(function() {
//2.1 基本动画 [回调函数]
$("#zz").click(function(){
$("#aa").toggle(1000);//切换
})
})
</script>
注意:此时的toggle在1.9版本后之后变成了动画效果
二、滑动
slideUp(Time):动画收缩(向上滑动)-->隐藏
slideDown(Time):动画展开(向下滑动)-->显示
slideToggle(Time):动画切换
2.1 slideUp(Time):动画收缩(向上滑动)-->隐藏:
<script type="text/javascript">
$(function() {
//2.2 滑动动画
$("#aa").hide(); //默认隐藏
$("#xx").on("click", function() {
$("#aa").slideDown(1000); //1s 显示
})
})
</script>
注意:1000=1s(秒)
2.2 slideDown(Time):动画展开(向下滑动)-->显示:
<script type="text/javascript">
$(function() {
//2.2 滑动动画
$("#yy").click(function() {
$("#aa").slideUp(2000); //隐藏
})
})
</script>
2.3 slideToggle(Time):动画切换:
<script type="text/javascript">
$(function() {
//2.2 滑动动画
$("#zz").click(function() {
$("#aa").slideToggle(1000); //切换
})
})
</script>
三、淡入淡出(透明度)
fadeIn(Time):淡入(透明度减少)
fadeOut(Time):淡出(透明度增大)
fadeToggle(Time):切换
3.1 fadeIn(Time):淡入(透明度减少):
<script type="text/javascript">
$(function() {
//2.3 淡入淡出(透明度)
$("#aa").hide(); //默认隐藏
$("#xx").on("click", function() {
$("#aa").fadeIn(1000); //1s 显示
})
})
</script>
3.2 fadeOut(Time):淡出(透明度增大):
<script type="text/javascript">
$(function() {
//2.3 淡入淡出(透明度)
$("#yy").click(function() {
$("#aa").fadeOut(2000); //隐藏
})
})
</script>
3.3 fadeToggle(Time):切换:
<script type="text/javascript">
$(function() {
//2.3 淡入淡出(透明度)
$("#zz").click(function() {
$("#aa").fadeToggle(1000); //切换
})
})
</script>
四、自定义动画
元素.animate({属性:属性值},Time)
缩放:
width
height移动:
top
left
4.1 缩放:
<script type="text/javascript">
$(function() {
//2.4 自定义动画
//--缩放
$("#bbb").click(function(){
$("#aa").animate({
width:100,//如果习惯写px的话就要加"" 如:width:"100px";
heigh :300
},1000);
})
})
</script>
4.2 移动:
<script type="text/javascript">
$(function() {
//2.4 自定义动画
//--移动[2]
$("#bbb").click(function(){
$("#aa").animate({
left:"100px",
top:"100px",
},1000);
})
})
</script>
4.3 在自身基础上移动
$(function() {
//2.4 自定义动画
//在自身基础上移动
$("#bbb").click(function(){
$("#aa").animate({
left:"+=5",
top:"+=8"
},1000);
})
})
</script>
OK,以上是我们今天所学习的所有内容,希望各位看官能给个三连,小陽在此祝愿各位看官能够把握现在,成就将来!