jQuery_04 事件&动画

文章目录

• 一、事件
• 二、动画
• 总结

---

一、事件

（1）加载Dom两种方式

 window.onload

个人理解概述：

   执行完其他代码，最后执行该括号内的代码。（只能写一个）

代码如下（示例）：

            // window.onload=function(){
			// 	alert(123);
			// };

jQuery方法

个人理解概述：

   执行完其他代码，最后执行该括号内的代码。(可以写多个)

代码如下（示例）：

            $(function(){
            alert(123)
            });

（2）绑定事件两种方式

 元素.on("事件名"，function（）{})

代码如下（示例）：

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

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

代码如下（示例）：

            	$("#oBtn1").click(function() {
					alert('呵呵')
				});

 （3）合成事件/事件切换

hover

概述：

   鼠标悬停合成事件

代码如下（示例）：

            $("#oDiv").hover(function() {
				$(this).addClass("over")
			}, function() {
				$(this).removeClass('over')
			});

toggle

概述：

鼠标点击合成事件

代码如下（示例）：

  $("#oBtn2").click(function() {
				//没有传递参数 调用后立刻隐藏与显示
				//有参数（毫秒 调用后 有延时效果）
				//$("#oDiv").toggle(1000);
				$("#oDiv").toggle(function() {
					alert("隐藏了！我出现了");
				}, function() {
					alert('我出现了')
				});
			});

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

传播

概述：

  小-->中-->大

代码如下（示例）：

            	$("body").click(function(){
				alert(123);
			});
		

组织传播

概述：

  事件后面加上 return false

代码如下（示例）：

          	
			$("#oBtn2").click(function(){
				alert(456);
				return false;//组织事件传播
			});

 （5）事件坐标

 offsetX

概述：

当前元素左上角

代码如下（示例）：

           $("body").click(function(){
				//pagex横坐标
				//鼠标
				console.log(event.pageX,event.pageY);
				//left和top
				console.log(event.offsetX,event.offsetY);
				//窗口
				console.log(event.clientX,event.clientY);
			});

clientX

概述：

   窗口左上角

代码如下（示例）：

            $("body").click(function(){
				//pagex横坐标
				//鼠标
				console.log(event.pageX,event.pageY);
				//left和top
				console.log(event.offsetX,event.offsetY);
				//窗口
				console.log(event.clientX,event.clientY);
			});

 

pageX

概述：

   网页左上角

代码如下（示例）：

        $("body").click(function(){
				//pagex横坐标
				//鼠标
				console.log(event.pageX,event.pageY);
				//left和top
				console.log(event.offsetX,event.offsetY);
				//窗口
				console.log(event.clientX,event.clientY);
			});

（6）移出事件

代码如下（示例）：

          	//--按钮只能点击一次[2]
			var flag=true;
			$("#oBtn3").click(function(){
				if(flag==true){
					alert(123);
					flag=false;
				}
				//一次性作用 通过调用解绑事件即可
				$("#oBtn3").one('click'function(){
					alert(123);
				});
			});
			//--按钮点击偶数次可行 奇数次不行
			var num=1;
			$("#oBtn3").click(function(){
				if(num%2 ==0){
					console.log('点击了'+num);
				}
				num++;
				alert(123);
			});

---

二、动画效果

（1）基本

显示、隐藏、切换

代码如下（示例）：

		//隐藏
		  $("#b2").click(function(){
			 //$("mydiv").hide(); 没有参数 立刻隐藏
			  $("#mydiv").hide(3000);
		  });
		//显示
		$("#b1").click(function(){
			$("#mydiv").show(3000);
		});
		//显示|隐藏
		$("#b3").click(function(){
			$("#mydiv").toggle(3000);
		});

 （2）滑动

slideUp(Time)——动画收缩、SlideDown(Time)——动画展开、slidetoggle（Time）——动画切换

代码如下（示例）：

			//向上滑
		$("#b4").click(function(){
			$("#mydiv").slideUp(3000);
		});
		//向下滑
		$("#b5").click(function(){
			$("#mydiv").slideDown(3000);
		});
		//滑动上下
		$("#b6").click(function(){
			$("#mydiv").slideToggle(3000);
		});

 （3）淡入淡出（透明度）

fadeIn(Time)——淡入（透明度减少）

fadeOut(Time)——淡出（透明度增大）

fadeToggle(Time)——切换

代码如下（示例）：

	$("#b7").click(function(){
			$("#mydiv").fadeout(3000);
		});
		
		$("#b8").click(function(){
			$("#mydiv").fadeIn(3000);
		});
		
		$("#b9").click(function(){
			$("#mydiv").fadeToggle(3000);
		});

 （4）自定义动画

代码如下（示例）：

		//--缩放
		$("#b10").click(function(){
			$("#mydiv").animate(){
				width:"500px",
				height:"500px"
			},3000);
		});
		
		
		//--移动[2]
		$("#b11").click(function(){
			$("#mydiv").animate(){
				left:"+=50px",
				top:"+=50px"
			})
		});

---

总结