jQuery(事件&动画)

一、事件

事件分为以下几点：

1、加载Dom两种方式 

执行顺序：jQuery3.0:window.onload比jQuery先执行

jQuery1.0和jQuery2.0:jQuery比window.onload先执行

方式一、window.onload方式:

执行时间：整个网页中所有内容（包括图片）加载完毕，才会执行

//1.1 加载DOM两种方式(区别)
/* 只能写1个 多个会被覆盖 */
/* 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方式1");
})
$(function(){
console.info("jQuery方式2");
})
$(function(){
console.info("jQuery方式3");
}) */

2、绑定事件两种方式

 （1）元素.on（“事件名”,function(){}）方式

//--元素.on/bind()
/* $("#aa").on("click",function(){
alert("嘿嘿");
}) */
/* $("#aa").bind("mouseover",function(){
alert("张牛逼别睡觉")
}) */

（2）元素.事件名（function(){}）方式

//--元素.事件名
/* $("#aa").mouseover(function(){
alert(33);
}) */
/* $("#aa").click(function(){
alert("干嘛");
}) */

3、合成事件/事件切换

//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();//隐藏
}) */

4、事件传播（事件冒泡）

//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被点击了")
}) */

5、事件坐标

//1.5 事件event的坐标[了解即可 pageX,pageY]
/* $("#aa").on("click",function(e){
console.info(e.pageX,e.pageY);
}) */

6、移除事件

//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++;
}) */

二、动画效果

1、基本动画

显示: show                              隐藏：hide                             切换:toggle

//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、滑动动画

slideUp：动画收缩(向上滑动) —》隐藏:

slideDown:动画展开（向下滑动）--》显示

动画切换:slideToggle

//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
}) */

3、淡入淡出（透明度）

fadeIn:淡入（透明度减少）

fadeOut:淡出（透明度增大）

fadeToggle：切换

//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
}) */

4、自定义动画

//2.4 自定义动画
//--缩放
/* 	$("#bb").on("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"
},100)
}) */