jquery|jQuery_04(事件&动画) javascript|前端

一.事件

1.加载Dom两种方式 window.onload方式
执行时间：整个网页中所有内容（包括图片）加载完成后，才会执行
编写个数：一个html内只能编写一个，不然会覆盖
jQuery方式
执行时间：网页结构绘制完成后，执行
编写个数：一个html内能编写多个
两个都有的情况下执行顺序
jQuery3.0版本：window.onload比jQuery先执行
jQuery1.0和2.0版本：jQuery比window.onload先执行

测试两种方式的区别（个数+顺序）
window.onload方式

//原生态JavaScript加载DOM的方式 window.onload = function{ alert(123); }; //给定一个函数 function.myload(){ alert(123) }; //通过onload调用 window.onload = myload(); //添加事件监听的方式 //该方式可以出现多次 window.addEventListener('load',function(){ alert（123） }) window.addEventListener('load',function(){ alert（456） })

jQuery方式

//完整写法 $(document).ready(function(){ alert(123) })//简写 $(function(){ alert(123) })$(document).on('load',function(){ alert(123) });

2.绑定事件两种方式例题

1.绑定时间的两种方式on元素.事件点击获取2.合成|切换事件hover（）toggle（）

元素.on/bind("事件名"，function(){})

$("#oBth1").on('click',function(){ alert(123); })

$("#oBth1").bind('click',function(){ alert(123); })

元素.事件名（function（）{}）

$("#oBth1").click（function(){ alert(123); })

3.合成事件/事件切换 hover():鼠标悬停合成事件

$("#oDiv").hover(function(){ //移入显示 $(this).addClass("over"); },function(){ // 移出隐藏 $(this).removeClass("over"); });

toggle()：鼠标点击合成事件

$("#oBtn2").click(function(){ //没有传递参数调用后立即隐藏于显示 // 有参数（毫秒）调用后有延时效果 $("#oDiv").toggle(function(){ alert("隐藏"); },function(){ //运行结果，前面的被覆盖掉 alert("出现"); }); });

4.事件传播传播：小——中——大
阻止传播：后面加上return false

//当大的和小的标签同时被设置同一事件，小的被触发，大的也会跟着被传递触发 $("body").click(function(){ alert(123); }); $("#oBtn2").click(function(){ alert(456); //return false; 防止事件的传播 return false; });

5.事件坐标

$("body").click(function(){ //鼠标 //pageX 横坐标 pageY 纵坐标包含间隙 console.log(event.pageX,event.pageY); //left和top body有默认的margin和padding值 //offsetX 横坐标（不包含间隙） offsetY 纵坐标 // console.log(event.offsetX,event.offsetY); //窗口 console.log(event.clientX,event.clientY); });

6.移除事件

// 按钮只能点击一次 /* $("#oBtn3").click(function(){ alert(123); //一次性作用通过调用解绑事件即可 // 1. // $(this).off(); // 2. $(this).unbind(); //解绑事件 }); */// 3. // var flag =true; // $("#oBtn3").click(function(){ //if(flag === true){ //alert(123); //flag = false; //} // }); // 4. //jQuery中提供一个方法 one // $("#oBtn3").one('click',function(){ //alert(123); // });

// 按钮点击偶数次可行奇数不行 var num =1; $("#oBtn3").click(function(){ if(num % 2===0){ // alert(123); alert("点击了"+num); } num++; console.log(num) });

二.动画效果

$(function(){ //1.opacity透明属性 //隐藏 hide(); $("#btn2").click(function(){ $(div).hide(); //没有参数，立刻隐藏 $("div").hide(5000); //延时效果 }); //显示 show(); $("#btn1").click(function(){ // $("div").show(); //$("div").show(1000); }); //显示与隐藏toggle(); $("#btn3").click(function(){ $("div").toggle(1000); }); //滑动上slideUp(); $("#btn4").click(function(){ $("div").slideUp(1000); }); //滑动下sildeDown(); $("#btn5").click(function(){ $("div").slideDown(1000); }); //滑动上下sildeToggle(); $("#btn6").click(function(){ $("div").slideToggle(1000); }); // 淡入 $("#btn7").click(function(){ $("div").fadeOut(1000); }); // 淡出 $("#btn8").click(function(){ $("div").fadeIn(1000); }); $("#btn9").click(function(){ $("div").fadeToggle(1000); }); $("#btn10").click(function(){ $("div"). animate({ width:"500px", height:"500px" },3000); }); $("#btn11").click(function(){ $("div"). animate({ left:"+=50px", top:"+=3px" },3000); }); });

【jquery|jQuery_04(事件&动画)】