jQuery事件&动画效果
思维导图
老规矩先上思维导图，建议把思路理顺了在观看下方内容
1.事件
1.1加载Dom
1.1.1window.onload方式
- 执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
- 编写个数：1个
1.1.2jQuery方式
- 执行时间：网页结构绘制完成后执行
- 编写个数：多个
1.1.3总结
jQuery3.0：window.onload比jQuery先执行
jQuery1.0和2.0：jQuery比window.onload先执行
以下就是测试两种方式的代码记住把两个库导进去一个一个试两个同时库同时运行的话只能运行一个库
<title>加载Dom两种方式</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
//<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/*js方式*/
// function fa(){
// console.info("Dom/页面被加载了!-js方式");
// }
// window.οnlοad=fa();
window.onload=function(){
console.info("Dom/页面被加载了!-js方式1");
}
window.onload=function(){
console.info("Dom/页面被加载了!-js方式2");
}
/*jQuery方式*/
$(function(){
console.info("Dom/页面被加载了！-jQuery方式1");
})
$(function(){
console.info("Dom/页面被加载了！-jQuery方式2");
})
</script>
1.2绑定事件
- 元素.on(“事件名”,function(){})
- 元素.事件名(function(){})
案例如下：
<script type="text/javascript" src="js/jquery-3.3.1.js"></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添加鼠标进入事件.也可以使用这种方式 mousemove:移动
$("#da").mouseenter(function() {
console.info("鼠标进来了");
})
$("#da").mousemove(function() {
console.info("鼠标进来了");
})
$("#da").on("mouseenter", function() {
console.info("div鼠标进来了");
})
// 3.通过两种方式给div添加鼠标离开事件.mouseleave
$("#da").mouseleave(function() {
console.info("鼠标出去了");
})
$("#da").bind("mouseleave", function() {
console.info("鼠标出去了");
})
})
</script>
</head>
<body>
<div id="da" style="background-color: yellow;width: 200px;height: 100px;">
</div>
</body>
1.3合成事件
- hover():鼠标悬停合成事件
当鼠标移动到指定位置时执行第一个函数
当鼠标移出来指定位置时执行第二个函数 - toggle()鼠标点击合成事件
案例如下：
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<!-- <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<div id="da" style="background-color: greenyellow;width: 200px;height: 100px;">
</div>
<img src="img/9.jpeg" id="ia" />
</body>
<script type="text/javascript">
// 隐藏图片js方式：
var ia=document.getElementById("ia");
ia.style.display="none";
$(function() {
//一开始隐藏图片
// $("#ia").hide();
// 1.hover:鼠标悬停合成事件
// 1.1给div添加鼠标悬停合成事件:打印内容.,
//合成事件:
$("#da").hover(function() {
console.info("鼠标悬停合成事件之鼠标进来");
}, function() {
console.info("鼠标悬停合成事件之鼠标出去");
})
//分开：
$("#da").mouseenter(function() {
console.info("鼠标悬停合成事件之鼠标进来");
})
$("#da").mouseleave(function() {
console.info("鼠标悬停合成事件之鼠标出去");
})
// 1.2给div添加鼠标悬停合成事件:显示和隐藏图片(图片一开始处于隐藏状态).
$("#da").hover(function(){//鼠标进来触发
$("#ia").show();//显示图片
},function(){//鼠标离开触发
$("#ia").hide();//隐藏图片
})
// 2. toggle：鼠标点击合成事件.
// 2.1给div添加鼠标点击合成事件：显示和隐藏图片(图片一开始处于隐藏状态).
//鼠标点击合成事件：jQuery在3.0以上版本删除了鼠标点击合成事件toggle所有只能使用3.0以下版本
$("#da").toggle(function() {
$("#ia").show(); //显示图片
}, function() {
$("#ia").hide(); //隐藏图片
})
})
1.4事件传播(事件冒泡)
阻止传播:在事件后面加上retum false;
案例如下：
<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添加鼠标点击事件.
$("body").click(function(){
console.info("body被点击了");
// return false;//事件传播截止到当前事件 在哪里加就截止到哪里
})
// 4.点击span，事件传播截止到span.
$("#sa").click(function(){
console.info("span被点击了！");
// return false;//事件传播截止到当前事件 在哪里加就截止到哪里
})
// 5.点击span，事件传播截止到div.
$("#sa").click(function(){
console.info("span被点击了！");
})
$("#da").click(function(){
console.info("div被点击了!");
return false;//事件传播截止到当前事件 在哪里加就截止到哪里
})
})
</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>
1.5移除事件
- 元素.unbind(“事件名”)
注意：1.一般情况下不会使用unbind，推荐使用变量控制事件
2.如果某个元素只允许使用一次事件，则可以使用one()
案例如下：
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></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>
2.动画效果
2.1基本动画
- 显示:show(Time)
- 隐藏:hide(Time)
- 切换:toggle(Time)
案例如下：
<script src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// 1.给隐藏按钮添加事件：使div在规定的时间内消失。
$("#hide").click(function(){
//在1秒内隐藏图片，单位是：毫秒，1秒等于1000毫秒
$("#ia").hide(1000);//隐藏图片
})
// 2.给显示按钮添加事件：使div在规定的时间内显示。
$("#show").click(function(){
//在1秒内隐藏图片，单位是：毫秒，1秒等于1000毫秒
$("#ia").show(1000);//显示图片
})
// 3.给显示/隐藏按钮添加事件：使div在规定的时间内显示和隐藏。
$("#toggle").toggle(function() {//隐藏图片
//在1秒内隐藏图片，单位是：毫秒，1秒等于1000毫秒
$("#ia").hide(1000); //隐藏图片
}, function() { //显示图片
//在1秒内隐藏图片，单位是：毫秒，1秒等于1000毫秒
$("#ia").show(1000); //显示图片
})
// 4.给隐藏按钮添加事件：使div在规定的时间内隐藏，并且显示图片ia。
$("#hide").click(function(){
//在1秒内隐藏图片，单位是：毫秒，1秒等于1000毫秒
$("#ia").hide(1000);//隐藏图片 hide()里面加数组就可以在规定时间内隐藏
})
})
</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/9.jpeg" id="ia" />
</body>
2.2滑动动画
- slideUp(Time):动画收缩(向上滑动)–>隐藏
- slideDown(Time):动画展开(向下滑动)–>显示
- slideToggle(Time):动画切换
案例如下：
<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>
2.3淡入淡出动画
- fadeln(Time):淡入(透明度减少)
- fadeOut(Time):淡出(透明度增加)
- fadeToggle(Time):切换
案例如下：
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// 显示(淡入)
$("#show").click(function(){
$("#da").fadeIn(2000);
})
// 隐藏(淡出)
$("#hide").click(function(){
$("#da").fadeOut(2000);
})
$("#hide").click(function(){
$("#da").fadeOut(2000,function(){
alert("图片消失了");
})
})
// 显示/隐藏
$("#toggle").toggle(function(){
$("#da").fadeOut(2000);
},function(){
$("#da").fadeIn(2000);
})
})
</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>
2.4自定义动画
- 元素：animate({属性：属性值}，Time)
- 缩放：宽：width
高：heigth - 移动：上下：top
左右：left - 移动(本元素)，距离：上下：top=" + = "
左右：left=" - = "
案例如下：
<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)
// })
$("#big").click(function(){
$("#da").animate({//属性名：属性值； 可以写多个
width:500+"px",
height:500+"px"
},1000)
})
// 缩小
$("#small").click(function(){
$("#da").animate({//属性名：属性值； 可以写多个
width:100+"px",
height:100+"px"
},1000)
})
// 往右移动
$("#right").click(function(){
$("#da").animate({//属性名：属性值； 可以写多个
// left:300+"px"
left:'+=50'//无论在哪里都可以向右移动
},1000)
})
// 往左移动
$("#left").click(function(){
$("#da").animate({//属性名：属性值； 可以写多个
// left:100+"px"
left:'-=50'//无论在哪里都可以向左移动
},1000)
})
// 往下移动
$("#down").click(function(){
$("#da").animate({//属性名：属性值； 可以写多个
top:100+"px"
},1000)
})
// 往上移动
$("#up").click(function(){
$("#da").animate({//属性名：属性值； 可以写多个
top:35+"px"
},1000)
})
// 斜下右移动
$("#xxy").click(function(){
$("#da").animate({//属性名：属性值； 可以写多个
top:100+"px",
left:100+"px"
},1000)
})
// 斜上左移动
$("#xsz").click(function(){
$("#da").animate({//属性名：属性值； 可以写多个
top:35+"px",
left:10+"px"
},1000)
})
});
</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>
jQuery插件在下个博客里
扫一扫
1355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
