jquery_02_jquery事件及动画

首先说jQuery的事件。

<input type="button" id="btn" value="张三"/>
<p id="p1"><font color="red"></font></p>
<input type="text" id="txt"/>

1.文档加载事件：$(document).ready()

$(document).ready(function(){
    
}

当文档加载后执行的。

2.鼠标点击事件：.click()   单击； dblclick()   双击

	                //鼠标点击事件
	    //1.单击事件
		$("#btn").click(function(){
			$("#p1").html("<font color=red>张三被单击了</font>");
		});
		//2.双击事件
		$("#btn").dblclick(function(){
			$("#p1").html("<font color=red>张三被双击了</font>");
		});

3.获得焦点与失去焦点：.focus()  获得焦点；.blur() 失去焦点

			//获得焦点与失去焦点
		//1.获得焦点
		$("#txt").focus(function(){
			$("#txt").val("获得焦点");
		});
		//2.失去焦点
		$("#txt").blur(function(){
			$("#txt").val("失去焦点");
		});

4.鼠标移入和移出事件：.mouseover() 鼠标移入；.mouseout() 鼠标移出

		//1.鼠标移入
		$("#txt").mouseover(function(){
			$("#txt").val("鼠标移入");
		});
		//1.鼠标移出
		$("#txt").mouseout(function(){
			$("#txt").val("鼠标移出");
		});

再说jQuery的动画：

1.隐藏与显示DOM:   .show() 显示； .hide()隐藏

        $("#b1").click(function(){
			$("#p1").show();
		});
		$("#b2").click(function(){
			$("#p1").hide();
		});

2.淡入淡出效果 

fadeIn():淡入,括号里可以加修饰，"slow","fast",10000

fadeOut():淡出.括号里可以加修饰，"slow","fast",10000

fadeTaggle():淡入淡出开关：淡入变淡出，淡出变淡入，同样可以加参数

		$("#b3").click(function(){
			$("#d1").fadeIn();
		});
		$("#b4").click(function(){
			$("#d1").fadeOut();
		});
		$("#b5").click(function(){
			//$("#d1").fadeToggle();
			//$("#d1").fadeToggle("slow");
			//$("#d1").fadeToggle("fast");
			$("#d1").fadeToggle(5000);
		});

3.透明度效果：

dadeTo(  ,  ):第一个参数负责变化的快慢，第二个参数表示透明程度，范围是0--1，数值越大，透明度越不好。越小越透明。

$("#b6").click(function(){
			$("#d1").fadeTo("slow",0.1);
			$("#d2").fadeTo("slow",0.5);
			$("#d3").fadeTo("slow",0.9);
		});

4.滑动效果：

slideDown(" "):向下滑动效果，参数为变化的快慢

slideUp(""):向上滑动效果。参数为变化的快慢

            $("#b7").click(function(){
			$("#d4").slideDown("slow");
		});
		$("#b8").click(function(){
			$("#d4").slideUp("slow");
		});

5.移动效果

animate({

  方向：，

  opacity：透明度

  height:'150px',    ----> +=是逐渐变化，每次加1
  width:'150px'

})

 

		$("#b9").click(function(){
			$("#d5").animate({
				left:'500px',
				
			},"slow");
		});
		$("#b10").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,//透明度
				height:'150px',
				width:'150px'
			},"slow");
		});
		$("#b11").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,//透明度
				height:'+=150px',
				width:'+=150px'
			},"slow");
		});

6，暂停动画：

随时暂停正在动画的DOM,再次执行动画继续。

$("#b14").click(function(){
			$("#d6").stop();
		});

最后说一下，jquery的回调方法：

当执行完方法后的方法，下面的例子就是，当执行完show方法后，执行的方法。这就称为回调方法。

		$("#b12").click(function(){
			$("#p2").show(function(){
				alert("傻逼出来了");
			});
		});