<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#aa{
width:200px;
height:200px;
background-color:yellow;
position:absolute;/*绝对定位*/
top:50px;
left:50px;
}
p{
text-align:center;/*水平居中*/
background-color:pink;
}
.abc{
transform:rotate(720deg);
transition:all 2s;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/* jQuery第四次课 */
/* 一、事件 */
//1.1 加载DOM两种方式(区别)
// window.οnlοad=function(){
// console.info("js方式");
// }
// $(function(){
// console.info("jQuery方式")
// })
// 底版本(1.几,2.几)的时候jQuery要比js快
// 目前的版本js要笔jQuery快
// 整个js的加载方式只写一个,多个会覆盖
// jQuery的加载方式可以写多个,都会执行
$(function(){
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
// $("#aa").on("click",function(){
// alert("嘿嘿嘿");
// })
// $("#aa").bind("mouseover",function(){
// alert("小张不要睡觉");
// })
//--元素.事件名
// $("#aa").click(function(){
// alert("干什么");
// })
// $("#aa").mouseover(function(){
// alert(123);
// })
//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);//1s
//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(44944);
// // 将按钮禁用
// $("#btn").prop("disabled",true);
// })
//--按钮点击偶数次可行 奇数次不行
// var i=1;
// $("#btn").click(function(){
// if(i%2==0){//偶数次
// console.info(44944,i);
// }
// i++;
// })
/* 二、动画 */
//2.1 基本动画 [回调函数]
// $("#aa").hide();//默认隐藏
// $("#xx").click(function(){
// $("#aa").show(1000,function(){
// //回调函数
// alert("来了，老弟");
// });//1s
// })
// $("#yy").click(function(){
// $("#aa").hide(2000);//2s
// })
// $("#zz").click(function(){
// $("#aa").toggle(1000);//1s
// })
//
//2.2 滑动动画
// $("#aa").hide();//默认隐藏
// $("#xx").click(function(){
// $("#aa").slideDown(1000);//1s
// })
// $("#yy").click(function(){
// $("#aa").slideUp(2000);//2s
// })
// $("#zz").click(function(){
// $("#aa").slideToggle(1000);//1s
// })
//2.3 淡入淡出(透明度)
// $("#aa").hide();//默认隐藏 fade:褪色
// $("#xx").click(function(){
// $("#aa").fadeIn(1000);//1s
// })
// $("#yy").click(function(){
// $("#aa").fadeOut(2000);//2s
// })
// $("#zz").click(function(){
// $("#aa").fadeToggle(1000);//1s
// })
//2.4 自定义动画
//--缩放
// $("#bb").on("click",function(){
// $("#aa").animate({
// windth:"100px",
// height:"300px"
// },1000);
// })
//--移动[2]
// 在自身基础上进行移动
// $("#bb").click(function(){
// $("#aa").animate({
// left:"+=5",
// top:"+=10"
// },100)
// })
$("#bb").click(function(){
// 给div增加abc的样式
$("#aa").addClass("abc");
})
})
</script>
</head>
<body>
<a style="text-decoration:none;" href="#">显示</a>
<input type="button" value="点我试试" di="btn"/>
<button id="xx">显示(展示)[淡入]</button>
<button id="yy">隐藏(收缩)[谈出]</button>
<button id="zz">显示/隐藏(展示/收缩)[淡入/谈出]</button>
<button id="bb">变变变</button>
<div id="aa"></div>
<br />
<br />
<p>这是一个巴掌</p>
</body>
</html>
总结
加载DOM两种方式(区别)
底版本(1.几,2.几)的时候jQuery要比js快
目前的版本js要笔jQuery快
整个js的加载方式只写一个,多个会覆盖
jQuery的加载方式可以写多个,都会执行
