jQuery04事件&动画效果
作者：互联网
目录
1.事件
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="js/jquery-3.3.1.js"></script> -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 加载Dom两种方式
// window.onload方式
// 执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
// 编写个数：1个
// jQuery方式
// 执行时间：网页结构绘制完成后，执行
// 编写个数：多个
// 两个都有的情况下执行顺序【面试题】
// jQuery3.0：window.onload比jQuery先执行
// jQuery1.0和2.0：jQuery比window.onload先执行
// 案例1：测试两种方式的区别【个数+顺序】
//多个后者覆盖前者
// window.onload=function(){
// alert(111);
// }
// window.onload=function(){
// alert(222);
// }
//不会覆盖
// $(function(){
// alert(111)
// })
// $(function(){
// alert(222)
// })
//导入3.0以上jQuery类库 原js代码加载函数先执行
//导入3.0以下jQuery类库 原js代码加载函数后执行
// window.onload=function(){
// alert(111);
// }
// $(function(){
// alert(222)
// })
</script>
<script type="text/javascript">
// 绑定事件两种方式
// 元素.on("事件名",function(){})
// 元素.事件名(function(){})
// 案例2：演示事件(鼠标悬停和点击)的两种方式
$(document).ready(function(){
// $('#obtn1').on("mouseover",function(){
// $('#obtn1').css("background","red")
// })
// $('#obtn1').on("mouseout",function(){
// $('#obtn1').css("background","yellow")
// })
// $("#obtn1").click(function(){
// alert(111)
// })
})
</script>
<style type="text/css">
a{
background-color: red;
display: inline-block;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
text-decoration: none;
}
/* a:hover{
background-color: yellow;
color: beige;
} */
</style>
<script type="text/javascript">
// 合成事件/事件切换
// hover()：鼠标悬停合成事件
// 鼠标移上去第一个函数
// 鼠标移除第二个函数
// 案例3：升级案例2鼠标悬停显示和隐藏
// toggle()：鼠标点击合成事件
// 案例4：升级案例2鼠标点击显示和隐藏
$(function(){
$("#obtn2").hover(function(){
$("#odiv1").show();//显示
},function(){
$("#odiv1").hide();//隐藏
})
$("#obtn3").click(function(){
$("#odiv1").toggle(3000)
})
})
</script>
<script type="text/javascript">
// 事件传播（事件冒泡）
// 传播：小-->中-->大
// 阻止传播：事件后面加上 return false
// 案例5：给body div span(在div中) 分别添加点击事件，测试事件传播
$(function(){
$("#osp1").click(function(){
alert(11)
return false;
})
$("#odiv2").click(function(){
alert(22)
return false;
})
$("body").click(function(){
// alert(33)
})
})
</script>
<script type="text/javascript">
// 事件坐标
// offsetX：当前元素左上角
// clientX：窗口左上角
// pageX：网页左上角
// 案例6：pageX实现 鼠标悬浮，获取鼠标坐标
// $(function(){
// $('body').click(function(){
// console.log(event.pageX+" "+event.pageY);
// console.log(event.offsetX+" "+event.offsetY);
// console.log(event.clientX+" "+event.clientY);
// })
// })
</script>
<script type="text/javascript">
// 移除事件：
// 元素.unbind("事件名")
// 案例7：按钮点击一次，不能再次点击
// 注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
// 案例8：点击按钮偶数次可以，奇数次则失效
// 注意2：如果某个元素只允许使用一次事件，则可以使用one()
// 案例9：按钮只允许点击一次
$(function(){
var count=0;
$('#obtn4').click(function(){
if(count % 2==0){
console.log(count)
}
count++;
// $(this).unbind();
// $(this).off();
// $(this).attr("disabled","disabled")
})
$('#obtn5').one('click',function(){
alert(111)
})
})
</script>
</head>
<body>
<button id="obtn1" type="button">按钮</button>
<hr >
<a href="#">我的老婆</a>
<hr >
<button id="obtn2" type="button">按钮</button>
<div id="odiv1" style="width: 100px; height: 100px;background-color: yellow;"></div>
<button id="obtn3" type="button">按钮</button>
<hr >
<div id="odiv2" style="width: 100px;height: 100px;background-color: aqua;">
<br>
<br>
<span id="osp1" style="background-color: pink;">
nidjjdd
</span>
</div>
<hr >
<button id="obtn4" type="button">按钮</button>
<button id="obtn5" type="button">按钮</button>
</body>
</html>
2.动画效果
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 动画效果
// 基本
// 显示：show(Time)
// 隐藏:hide(Time)
// 切换：toggle（Time）
// 案例1：点击按钮，控制div显示和隐藏（基本动画）
// 滑动
// slideUp(Time)：动画收缩(向上滑动)-->隐藏
// slideDown(Time)：动画展开(向下滑动)-->显示
// slideToggle(Time)：动画切换
// 案例2：点击按钮，控制div显示和隐藏（滑动）
// 淡入淡出(透明度)
// fadeIn(Time)：淡入(透明度减少)
// fadeOut(Time)：淡出(透明度增大)
// fadeToggle(Time)：切换
// 案例3：点击按钮，控制div显示和隐藏（透明度）
function test1() {
$("div:eq(0)").show()
}
function test2() {
$("div:eq(0)").hide()
}
function test3() {
$("div:eq(0)").toggle(3000)
}
function test4() {
$("div:eq(0)").slideUp(2000)
}
function test5() {
$("div:eq(0)").slideDown(2000)
}
function test6() {
$("div:eq(0)").slideToggle(2000)
}
function test7() {
$("div:eq(0)").fadeIn(3000)
}
function test8() {
$("div:eq(0)").fadeOut(3000)
}
function test9() {
$("div:eq(0)").fadeToggle(3000)
}
// 自定义动画
// 元素.animate({属性：属性值},Time)
// 缩放
// width
// height
// 案例4：点击按钮，控制div的宽度和高度变大
// 移动
// top
// left
// 案例5：点击按钮，控制div移动，距离网页左上角
// 移动(本元素)，距离
// top= "+="
// left= "-="
// 案例6：点击按钮，控制div移动，距离本元素
function test10(){
$('div:eq(1)').animate({
width:"+=200px",
height:"+=200px"
},1000)
}
// function test11(){
// // alert(111)
// $('#dd').animate({
// left:"600px",
// width:"200px"
// })
// }
</script>
<!-- <script type="text/javascript">
$(function(){
// 定时器
window.setInterval(function(){
$("#dd").animate({
left:"+=5px"
},2);
},500);
})
</script> -->
</head>
<body>
<button onclick="test1()">动画show</button>
<button onclick="test2()">动画hide</button>
<button onclick="test3()">合成动画toggle</button>
<div id="" style="width: 100px;height: 100px;background-color: red;">
</div>
<button onclick="test4()">slideUp</button>
<button onclick="test5()">slidDown</button>
<button onclick="test6()">slideToggle</button>
<button onclick="test7()">fadeIn</button>
<button onclick="test8()">fadeOut</button>
<button onclick="test9()">fadeToggle</button>
<hr >
<button onclick="test10()">animate</button>
<div id="" style="width: 100px;height: 100px;background-color: red;">
</div>
<button onclick="test11()">animate</button>
<div id=""style="width: 50px;height: 50px;background-color: deeppink;position: absolute;left: 0px;top: 400px;">
</div>
<script type="text/javascript">
$(function(){
window.setInterval(function(){
$('div').last().animate({
// width:"100px"
left:"+=10px"
},1000)
},1000)
})
</script>
</body>
</html>
标签：function,动画,效果,alert,案例,点击,按钮,jQuery04,div 来源： https://blog.csdn.net/m0_64719055/article/details/123643541