jQuery - 小鸟系列之事件和动画

jQuery事件主要有:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等

合成事件

//hover(enter,leave)
//用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);当光标移出这个元素时，会触发指定的第2个函数(leave)
$(".head").hover(function(){
	$(".content").show(); 
},function(){
	$(".content").hide();
});

//toggle(fn1,fn2,fn3)
//用户模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数(fn1);当再点击同一个元素时，则触发指定的第2个函数(fn2);如果有更多
//函数，则依次触发
//点击head , .content切换显示/隐藏
$(".head").click(function(){
	$(".content").toggle(function(){

	},function(){

	});
});

冒泡事件

//当body下面有个div,div下面有个span,并且 body,div,span都有click事件,这时候当点击span,div和body的click事件也会触发,这就是冒泡事件。
//冒泡事件会按DOM的层次结构像水泡一样不断向上直至顶端(先span后div再body事件)
//停止事件冒泡
stopPropagation();
$("span").click(function(event){
	//操作...

	event.stopPropagation();     //停止事件冒泡
});

阻止默认行为

//网页中的元素有自己默认的行为，例如，单击”提交“按钮后表单会提交，单击超链接后会跳转，有时候需要阻止元素的默认行为
preventDefault();
$("#submitID").click(function(event){
	//验证失败时候..
	event.preventDefault();   //阻止默认行为 (表单提交)
});

事件对象的属性

event.type         			//获取事件的类型
$("a").click(function(event){
	alert(event.type);		//输出"click"
	return false;   		//阻止链接跳转
});

event.preventDefault();    	//阻止默认行为

event.stopPropagation();	//阻止事件的冒泡

event.target 属性
$("a").click(function(event){
	alert(event.target.href);		//输出超链接 href 的内容
	return false;   				//阻止链接跳转
});

event.pageX / event.pageY			//获取到光标相对于页面的x坐标和y坐标

event.which 属性					//获取到鼠标的左、中、右键
$("body").mousedown(function(event){
	alert(event.which);   			//1==鼠标左键、2==鼠标中键、3==鼠标右键
});

移除事件

$("#btn").unbind("click");          //删除click事件
$("#btn").unbind("");     			//删除所有绑定的事件

one();    							//处理函数触发一次后，立即被删除
$("#btn").one("click",function(){
	alert("点击了");
});

模拟事件

$("#btn").trigger("click");
$("#btn").click();                  //是trigger的简写

//模拟事件并传递参数
$("#btn").click(function(event,msg1,msg2){
	alert(msg1+msg2);
});
$("#btn").trigger("click",['数据1','数据2']);  

执行默认操作

trigger() 						//方法触发事件之后，会执行浏览器默认操作
triggerHandler()  					//只触发事件，不会执行浏览器默认操作
$("input").trigger("focus");		//1.触发绑定的focus事件  2.元素input元素本身得到焦点
$("input").triggerHandler("focus")	//只会触发绑定的focus事件

动画

$("p").show();						//通过修改元素的高度和透明度达到显示效果
$("p").show(1000);					//1秒内显示
$("p").hide();
$("p").hide(1000);					//1秒内隐藏

$("p").fadeOut();					//指定的一段时间内降低元素的不透明度，直到元素消失("display:none")
$("p").fadeIn();					//和fadeOut()相反

$("p").slideDown();					//元素将从上至下延伸显示(通过改变元素的高度)
$("p").slideUp();					//和slideDown()相反

//自定义动画方法 animate()
#panel{
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid #0050D0;
	background: #96E555;
	cursor: pointer;
}
$("#panel").click(function(){
	$(this).animate({left:"500px"},3000);				//3秒内，像右移动500像素
});

//累加、累减动画
$(this).animate({left:"+=500px"},3000);					//在当前位置累加500像素

//多重动画(同时执行)
$(this).animate({left:"500px",height:"200px"},3000);	//像右移动的同时也会放大高度

//多重动画(顺序执行)
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);
//或者
$(this).animate({left:"500px"},3000)
	   .animate({height:"200px"},3000);

//动画回调函数
$(this).animate({left:"500px",height:"200px"},3000,function(){
	$(this).css("border","5px solid blue");				//在动画执行完成之后调用
});

//停止动画和判断是否处于动画状态
//都是可选参数，都为Boolean值。
//clearQueue代表是否要清空未执行的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态
//stop() 表示停止当前正在进行的动画，如果接下来还有动画等待继续进行
stop([clearQueue][,gotoEnd]);
$("#panel").hover(function(){
	$(this).stop().
		animate({height:"150",width:"300"},200);
},function(){
	$(this).stop().
		animate({height:"22",width:"60"},300);
});

//判断元素是否处于动画状态
if(!$("#panel").is(":animated")){
	//如果当前没有进行动画，则添加新动画
}

//其他动画方式
toggle(speed,[callback]);           		//切换元素的可见状态
slideToggle(speed,[callback]);				//通过高度切换元素的可见性
fadeTo(speed,opacity,[callback]);			//把元素的不透明度以渐进方式调整到指定的值，只调整元素的不透明度

$("#panel").fadeTo(600,0.2);				//将内容渐渐的调整到指定的不透明度()