jQuery_04(事件&动画)

最新推荐文章于 2024-05-14 11:19:40 发布

阿菜酱

最新推荐文章于 2024-05-14 11:19:40 发布

阅读量608

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_65208075/article/details/123442918

版权

一.事件

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.绑定事件两种方式

例题

<body>
     <h3>1.绑定时间的两种方式    on  元素.事件   <h3>
      <botton id="oBth1">点击获取</botton>

     <h3>2.合成|切换事件    hover（）  toggle（）<h3>
     <div    id="oDiv"   style="width:100px">                     


</div>
</body>

元素.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);
	   });
	   
	   
	   
	   
	   
	   });

阿菜酱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_04(事件&动画)

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

扫一扫