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);//将内容渐渐的调整到指定的不透明度()