先说一下事件,事件分为:加载Dom两种事件/绑定事件的两种方式/合成事件/事件切换//事件的传播(事件冒泡)/事件event的坐标/事件的移除,六种事件
首先看看加载Dom两种事件的代码:两种引入的不同类库,在网页运行里检查看两种被执行块
window.onload=function(){
console.info("js方式1");
}
window.onload=function(){
console.info("js方式2");
}
window.onload=function(){
console.info("js方式3");
}
jQuery可以多个被执行
$(function(){
console.info("jQuery方式q")
})
$(function(){
console.info("jQuery方式2")
})
$(function(){
console.info("jQuery方式3")
})
第二种绑定事件的两种方式 [eg.:点击、悬停事件]
//--元素.on/bind()
$("#aa").on("click",function(){
alert("广告")
})
$("#aa").bind("mouseover",function(){
alert("aa")
})
//--元素.事件名
$("#aa").click(function(){
alert("干哈")
})
第三种:合成事件/事件切换
--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);
第四种:事件的传播(事件冒泡)
$("p").click(function(){
console.info("p被打了")
})
$("div").click(function(){
console.info("div被打了")
return false;//阻止传播
})
$("body").click(function(){
console.info("body被打了")
})
第五种: 事件event的坐标
$("#aa").click(function(e){
console.info(e.pageX,e.pageY)
})
第六种:事件的移除
$("#btn").click(function(){
//做一系列事情
console.info(44944);
//将点击事件进行移除
$("#btn").off("click");//unbind();
//按钮禁用
$("#btn").attr("disabled",true);
})
$("#btn").one("click",function(){
console.info(44944);
//将按钮禁用
$("#btn").attr("disabled",true)
}) */
//--按钮点击偶数次可行 奇数次不行
var i=1;
$("#btn").click(function(){
if(i%2==0){
console.info(44944,i);
}
i++;
})
接下来是动画,动画分为:基本动画 [回调函数]/滑动动画/淡入淡出(透明度)
先看基本动画:
$("#aa").hide();
$("#xx").on("click",function(){
$("#aa").show(1000,function(){
//回调函数
alert("来了")
});//1s
})
$("#yy").click(function(){
$("#aa").hide(2000);
})
$("#zz").click(function(){
$("#aa").toggle(1000);
})
滑动动画
$("#aa").hide();
$("#xx").on("click",function(){
$("#aa").slideDown(1000)//1s
})
$("#yy").click(function(){
$("#aa").slideUp(2000);
})
$("#zz").click(function(){
$("#aa").slideToggle(1000);
})
淡入淡出动画
$("#aa").hide();
$("#xx").on("click",function(){
$("#aa").fadeIn(1000)//1s
})
$("#yy").click(function(){
$("#aa").fadeOut(2000);
})
$("#zz").click(function(){
$("#aa").fadeToggle(1000);
})
自定义动画(缩放、移动、在自身基础上移动)
//--缩放
$("#bbb").click(function(){
$("#aa").animate({
width:100,
height:300
},1000);
})
//--移动[2]
$("#bbb").click(function(){
$("#aa").animate({
left:100,
top:100
},1000);
})
//在自身基础上面移动
$("#bbb").click(function(){
$("#aa").animate({
left:"+=5",
top:"+=8"
},100);
})
再给大家看看我的全部代码,记得要一个事件一个事件的运行,如果全部运行会运行不出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#aa{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;/* 绝对定位 */
top: 50px;
left: 50px;
}
p{
text-align: center;
background-color: yellow;
}
.xyz{
transform: rotate(720000000deg);
transition: all 10s;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/* jQuery第四次课 */
/* 一、事件 */
//1.1 加载DOM两种方式(区别)
window.onload=function(){
console.info("js方式1");
}
window.onload=function(){
console.info("js方式2");
}
window.onload=function(){
console.info("js方式3");
}
jQuery可以多个被执行
$(function(){
console.info("jQuery方式q")
})
$(function(){
console.info("jQuery方式2")
})
$(function(){
console.info("jQuery方式3")
})
$(function(){
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
$("#aa").on("click",function(){
alert("广告")
})
$("#aa").bind("mouseover",function(){
alert("aa")
})
//--元素.事件名
$("#aa").click(function(){
alert("干哈")
})
//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").click(function(e){
console.info(e.pageX,e.pageY)
})
//1.6 事件的移除
//--按钮只能点击一次[2]
$("#btn").click(function(){
//做一系列事情
console.info(44944);
//将点击事件进行移除
$("#btn").off("click");//unbind();
//按钮禁用
$("#btn").attr("disabled",true);
})
$("#btn").one("click",function(){
console.info(44944);
//将按钮禁用
$("#btn").attr("disabled",true)
}) */
//--按钮点击偶数次可行 奇数次不行
var i=1;
$("#btn").click(function(){
if(i%2==0){
console.info(44944,i);
}
i++;
})
/* 二、动画 */
//2.1 基本动画 [回调函数]
$("#aa").hide();
$("#xx").on("click",function(){
$("#aa").show(1000,function(){
//回调函数
alert("来了")
});//1s
})
$("#yy").click(function(){
$("#aa").hide(2000);
})
$("#zz").click(function(){
$("#aa").toggle(1000);
})
//2.2 滑动动画
$("#aa").hide();
$("#xx").on("click",function(){
$("#aa").slideDown(1000)//1s
})
$("#yy").click(function(){
$("#aa").slideUp(2000);
})
$("#zz").click(function(){
$("#aa").slideToggle(1000);
})
//2.3 淡入淡出(透明度)
$("#aa").hide();
$("#xx").on("click",function(){
$("#aa").fadeIn(1000)//1s
})
$("#yy").click(function(){
$("#aa").fadeOut(2000);
})
$("#zz").click(function(){
$("#aa").fadeToggle(1000);
})
//2.4 自定义动画
//--缩放
$("#bbb").click(function(){
$("#aa").animate({
width:100,
height:300
},1000);
})
//--移动[2]
$("#bbb").click(function(){
$("#aa").animate({
left:100,
top:100
},1000);
})
//在自身基础上面移动
$("#bbb").click(function(){
$("#aa").animate({
left:"+=5",
top:"+=8"
},100);
})
//旋转动画
$("#bbb").click(function(){
$("#aa").addClass("xyz");
})
})
</script>
</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>
</html>