jquery事件和动画操作集锦

一，事件

1,加载事件

1 2 3 4 5 6

$(document).ready(function(){   //todo }); //dom准备就绪后执行ready里面的函数，此时dom对应的相关文件(比如图片)可能还未加载完毕，此时图片的height和width还不能访问。 $img.load(function(){     //todo }); //图片加载完毕后执行里面的函数。

 

2，事件绑定：

1）

1 2 3 4 5 6 7 8

var $ul=$("#ulMain");             $ul.bind("click",{name:"zy",age:22},function(event){                 alert(event.data.name);             });  //绑定ul的click事件，并传递一个参数（参数类型为一个对象）。bind方法可以多次调用。 简写方式如下： $ul.click({name:"zy",age:22},function(event){                 alert(event.data.name);             });

2）一次绑定多个事件：

1 2 3

$("#divMain").bind("mouseenter mouseleave",function(){                 $(this).append($("<b>div append</b>"));             });

 

3）添加事件命名空间：

1 2 3 4 5 6 7 8 9 10 11

$("#divMain").bind("mouseenter.divevent",function(){                 $(this).append($("<b>div mouseenter</b><br/>"));             }).bind("click.divevent",function(){                 $(this).append($("<b>div click</b><br/>"));             }).bind("dblclick.divevent",function(){                 $(this).append($("<b>div dblclick</b><br/>"));             });                $("#btnSubmit").bind("click",function(){                 $("#divMain").unbind(".divevent");  //解除命名空间即可             });

 

4）相同事件名，不通命名空间：

1 2 3 4 5 6 7 8 9 10

$("#divMain").bind("click",function(){                 $(this).append($("<b>div click</b><br/>"));             }).bind("click.divevent",function(){                 $(this).append($("<b>div click.divevent</b><br/>"));             });                $("#btnSubmit").bind("click",function(){                 $("#divMain").trigger("click!"); //感叹号表示仅触发没有命名空间的事件，这里仅会触发click事件，注意：1.9及以后版本移除了该功能！                 $("#divMain").trigger("click");  //触发所有click事件，这里会触发click和click.divevent事件。             });

 

3，合成事件：

即绑定了2个事件：

1）hover事件：模拟光标移入移出事件，它是用来替代mouseenter, mouseleave事件的，而非mouseover, mouseout事件。

1 2 3 4 5 6

var $ul=$("#ulMain");             $ul.hover(function(){                 $(this).css({backgroundColor:"red"});//光标移入该元素时修改背景色为红色             },function(){                 $(this).css({backgroundColor:"white"});//光标移入该元素时修改背景色为白色             });

 

2）toggle事件：有两个功能：

2.1） 鼠标连续单击同一元素依次执行相应的处理函数：toggle(fn1, fn2, fn3, ... fnN); 但是该功能在1.9及以后版本移除了，请注意。

1 2 3 4 5 6 7

$("#btnMain").toggle(function(){                 $ul.css("color","red");             },function(){                 $ul.css("color","yellow");             },function(){                 $ul.css("color","blue");             });  //依次单击按钮触发的事件。

 

2.2)     控制相应元素的显示和隐藏：

1 2 3 4

var $ul=$("#ulMain");             $("#btnMain").click(function(){                 $ul.toggle();             });  //   单击按钮时，隐藏或显示ul

 

3，事件冒泡：例如：如果span元素注册了click事件，span的父元素div也注册了click事件，div的父元素也注册了click事件，

那么单击span会依次触发这三个事件。

3.1） 阻止事件冒泡：

1 2 3 4

$("#spanMain").click(function(event){                 $("#spanSpan").text("span click");                 event.stopPropagation();  // 阻止事件冒泡，event为事件对象             });

 

3.2）阻止默认行为：

1 2 3 4 5 6 7

$("#btnSubmit").click(function(event){                 if($("txtName")=="")                 {                     //todo,错误提示                     event.preventDefault();//阻止submit的默认行为，即不提交表单。                 }             });

 

若要同时阻止事件冒泡和默认行为，可以在事件处理函数中返回 return false。

 

5，事件对象的属性：

1）type属性：

1 2 3

$("#btnPay").click(function( event ){     alert(event.type);  //事件的类型，此处输出 click });

2)  event.stopPropagation(); //阻止冒泡行为

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

4）target属性：

1 2 3 4 5

$("a").click(function(event){                 var tg=event.target;//获取触发事件的元素，这里为<a/>，该对象是DOM对象                 alert(tg.href);                 return false;             });

5）relatedTarget属性：

1 2 3 4 5 6 7 8

$("a").mouseover(function(event){                 var reltg=event.relatedTarget; //相当于IE中的event.fromElement，即光标是从哪个元素移入的                 alert(reltg.toString()); //                 return false;             }); // $("a").mouseout(function(event){                 alert(event.relatedTarget.toString()); // 针对mouseout，相当于IE中的event.toElement，即光标移出后到哪个元素上了。             });

6)   pageX，pageY属性：获取到光标相对于页面的x坐标和y坐标。

1 2 3 4

$("a").click(function(event){                 alert(event.pageX+","+event.pageY);                 return false;             });

7） which属性：鼠标单击事件中获取鼠标的左，中，右键对应的值，键盘事件中获取键盘的按键。

1 2 3

$("#txtMain").keyup(function(e){                 alert(e.which); // 比如按键盘上的A，则返回65             });

8）特殊键属性：如ctrlKey, altKey, shiftKey，按了哪个键，就会返回true，否则返回false。

1 2 3

$("#txtMain").keydown(function(e){                 alert(e.ctrlKey+"，"+e.shiftKey+"，"+e.altKey);             });

6，移除事件：

1) unbind方法：

unbind(); //删除所有事件

unbind(eventTypeString); //只删除指定类型的事件，比如"click"

unbind(eventTypeString, funcName); //删除指定类型事件的指定处理函数。

下面是最后一个例子：

1 2 3 4 5 6 7 8 9 10

var $ul =$("#ulMain");             $("#btnMain").click(func1= function(e){                 $ul.append($("<li>func1</li>"));             }).click(func2=function(){                 $ul.append($("<li>func2</li>"));             });                $("#btnDel").click(function(){                 $("#btnMain").unbind("click",func2);             });

2）one方法：仅执行一次绑定的事件，用法同bind方法。

1 2 3 4

var $ul =$("#ulMain");             $("#btnMain").one("click",function(){                 $ul.append($("<li>func1</li>"));             }); //click事件仅会触发一次。

7，模拟操作：

1）trigger()方法： 该方法能触发相应事件，比如：

1 2 3 4 5 6 7

$("#btnMain").bind("click",function(e,name,age){ $(function(){             var $ul =$("#ulMain");             $("#btnMain").bind("click",function(e,name,age){                 alert(name+","+age);             }).trigger("click",["zy",11]);  // 页面加载后就会执行click事件处理函数。         });

另外还会执行浏览器默认操作：

$("#txtMain").trigger("focus");  //触发元素的focus事件，同时元素本身获得焦点。

下面的函数仅触发事件，不执行浏览器默认操作：

$("#txtMain").triggerHandler("focus");  //触发元素的focus事件，不执行默认操作。

 

二，动画

jquery动画要求在标准模式下，即文件头包含如下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1， show() ,  hide(): 原理是修改元素的display样式。

1 2 3 4 5 6

$divMain =$("#divMain");             $("#btnSubmit").toggle(function(){                 $divMain.hide(1000);  //元素在1000毫秒内隐藏掉，不带参数会立即隐藏             },function(){                 $divMain.show(1500); //元素在1500毫秒内显示出来             });

 

2，fadeIn() , fadeOut(): 原理：改变元素透明度。

fadeIn:  在一段时间内增加元素的不透明度，直到元素完全显示出来。

fadeOut: 在一段时间内降低元素的不透明度，直到元素完全显示消失。

 

3，slideUp(),  slideDown(): 原理：改变元素高度。

slideUp: 元素由下到上缩短至隐藏。

slideDown: 元素由上到下延伸至显示。

1 2 3 4 5 6

$divMain =$("#divMain");             $("#btnSubmit").toggle(function(){                 $divMain.slideUp();             },function(){                 $divMain.slideDown();             });

 

4，自定义动画方法animate()

语法：animate(params, speed, callback);

1) 向右移动500px

样式：

1 2 3 4 5 6 7 8

#divMain{         position:relative;  //或者是absolute，这样才可以影响元素的top, left, bottom, right属性。         width:300px;         height:300px;         border:1px solid #005000;         background:#96E555;         cursor:pointer;     }

JS脚本：

1 2 3 4 5 6

$(function(){             $divMain =$("#divMain");             $("#btnSubmit").click(function(){                 $divMain.animate({left:"500px"}, 2000,null);             });         });

2）累加，累减动画：

1 2 3 4

$divMain =$("#divMain");             $("#btnSubmit").click(function(){                 $divMain.animate({left:"+=200px"}, 2000);     //在当前位置累加200px             });

 

3)多重动画：

1 2 3 4

$divMain =$("#divMain");             $("#btnSubmit").click(function(){                 $divMain.animate({left:"+=200px",height:"-=50px"}, 2000); // 位置变化的同时，高度也在变化             });

 

4）顺序执行动画：

1 2 3 4

$("#btnSubmit").click(function(){                 $divMain.animate({left:"+=100px"}, 1000)                 .animate({height:"-=50px"},1000);             });

 

5，停止动画和判断是否处于动画状态：

1）停止动画：

1 2 3 4 5

stop(clearQueue, gotoEnd); // clearQueue表示是否清空未执行完的队列， gotoEnd表示是否将正在执行的动画跳转到末状态。 $divMain =$("#divMain");             $("#btnSubmit").click(function(){                 $divMain.stop().animate({left:"+=100px"}, 1000); // 停止当前正在执行的动画，立即执行向右移动100的动画。             });

2) 判断元素是否处在动画中：

1 2 3 4 5 6 7

$divMain =$("#divMain");             $("#btnSubmit").click(function(){                 if(!$divMain.is(":animated"))  //元素不处于动画中才执行下面的动画                 {                     $divMain.animate({left:"+=100px"}, 1000);                 }             });

3）延迟执行动画：delay()函数

1 2 3 4 5 6 7

$divMain =$("#divMain");             $("#btnSubmit").click(function(){                 if(!$divMain.is(":animated"))                 {                     $divMain.delay(2000).animate({left:"+=100px"}, 1000);  //推迟2秒后才执行动画                 }             });

6，其它动画函数：

1）slideToggle(): 改变元素高度来隐藏元素

1 2 3 4

$divMain =$("#divMain");             $("#btnSubmit").click(function(){                 $divMain.slideToggle();             });

2）fadeTo() 调整元素的不透明度，不改变宽高：

1 2 3 4

$divMain =$("#divMain");             $("#btnSubmit").click(function(){                 $divMain.fadeTo(1000,0.2); //用1000毫秒时间将不透明度调整到20%             });

3）fadeToggle() 切换元素的不透明度：

1 2 3 4

$divMain =$("#divMain");             $("#btnSubmit").click(function(){                 $divMain.fadeToggle();             });