<title>jQuery 事件和动画</title>
<style type="text/css">
#aa{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 50px;
left: 50px;
}
p{
background: #00A8A8;
}
.abc{
transform: rotate(360deg);
transition: all 2s;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/* jQuery第四次课 */
/* 一、事件 */
//1.1 加载DOM两种方式(区别)
// js只能写一个其他会被覆盖
// window.οnlοad=function(){
// console.info("js1");
// }
// window.οnlοad=function(){
// console.info("js2");
// }
// window.οnlοad=function(){
// console.info("js3");
// }
// 不会被覆盖都会执行
// $(function(){
// console.info("jq1")
// })
// $(function(){
// console.info("jq2")
// })
// $(function(){
// console.info("jq3")
// })
$(function(){
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
/* $("#aa").on("click",function(){
alert("aa")
}) */
/* $("#aa").bind("mouseover",function(){
alert("aa")
}) */
//--元素.事件名
/* $("#aa").click(function(){
alert("hh")
}) */
/* $("#aa").mouseover(function(){
alert("hh")
}) */
//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
/* $("#aa").hide(); //隐藏
$("a").hover(function(){
$("#aa").show();
},function(){
$("#aa").hide();
}) */
//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
/* $("#aa").hide(); //隐藏
$("a").toggle(function(){
$("#aa").show();
},function(){
$("#aa").hide();
}) */
// $("#aa").toggle(1000);
//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被点击")
}) */
//1.5 事件event的坐标[了解即可 pageX,pageY]
/* $("#aa").on("click",function(e){
console.info(e.pageX,e.pageY);
}) */
//1.6 事件的移除
//--按钮只能点击一次[2]
/* $("#btn").click(function(){
console.info(44944);//做一系列事情
// 将该事件移除 off用法同
$("#btn").unbind("click")
// 将按钮禁用
$("#btn").prop("disabled",true);
}) */
// 一次事件
/* $("#btn").one("click",function(){
console.info(44);
$("#btn").prop("disabled",true);
}) */
//--按钮点击偶数次可行 奇数次不行
/* var i=1;
$("#btn").click(function(){
if(i%2==0){
console.info(4432,i);
}
i++;
}) */
/* 二、动画 */
//2.1 基本动画 [回调函数]
/* $("#aa").hide();//默认隐藏
$("#xx").click(function(){
$("#aa").show(1000,function(){
//回调函数
alert("大焦点搜啊")
});
})
$("#yy").click(function(){
$("#aa").hide(2000);
})
$("#zz").click(function(){
$("#aa").toggle(2000);
}) */
//2.2 滑动动画
/* $("#aa").hide();//默认隐藏
$("#xx").click(function(){
$("#aa").slideDown(1000,function(){
//回调函数
alert("大焦点搜啊")
});
})
$("#yy").click(function(){
$("#aa").slideUp(2000);
})
$("#zz").click(function(){
$("#aa").slideToggle(2000);
}) */
//2.3 淡入淡出(透明度)
/* $("#aa").hide();//默认隐藏
$("#xx").click(function(){
$("#aa").fadeIn(1000,function(){
//回调函数
alert("大焦点搜啊")
});
})
$("#yy").click(function(){
$("#aa").fadeOut(2000);
})
$("#zz").click(function(){
$("#aa").fadeToggle(2000);
}) */
//2.4 自定义动画
//--缩放
/* $("#bb").click(function(){
$("#aa").animate({
width:100,
height:300
},1000);
}) */
//--移动[2]
/* $("#bb").click(function(){
$("#aa").animate({
left:100,
top:200
},2000);
}) */
// 在自身基础上进行移动
$("#bb").click(function(){
$("#aa").animate({
left:"+=5",
top:"+=10"
},1100);
})
/* $("#bb").click(function(){
// 给div增加样式
$("#aa").addClass("abc");
}) */
})
</script>
</head>
<body>
<a style="text-decoration: blink;" href="#" >显示</a>
<input type="button" id="btn" value="点我试试" />
<button id="xx">显示(展开 淡入)</button>
<button id="yy">隐藏(收缩 淡出)</button>
<button id="zz">显示/隐藏(展开/收缩 淡入/淡出)</button>
<button id="bb">变变变</button>
<div id="aa">
<br />
<br />
<br />
<p>哈哈哈</p>
</div>
</body>
</html>