Jquery学习之事件和动画

 一.jquery中的事件

1.执行时机

jquery中使用$(document).ready()方法代替window.onload。区别在于window.onload在网页中的全部元素（包括元素的全部关联文件）彻底加载到浏览器中才开始执行，而$(document).ready()在DOM彻底就绪时就能够被调用。解决方法是另一个页面加载方法load()，load()会在元素的onload事件中绑定一个处理函数。若是处理函数绑定在元素上，会在元素的内容加载完毕后触发，若是绑定给window对象，会在全部内容加载完毕后触发。

$(window).load(function{})等价于window.onload=function(){}

多个事件的绑定以及简写

格式：$(document).ready(function(){  })只需屡次追加新的行为便可

简写$(function(){  })   ；也能够简写把document省略，即$().ready(function(){})

2.事件绑定

使用bind()方法来匹配元素进行特定事件的绑定，调用格式bind(type,[.data],fn);

第一个参数是事件类型，包括：blue、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、moseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等

第二个参数是可选参数，做为even.data属性值传递给事件对象的额外数据对象

第三个参数用来绑定的处理函数。

bind()方法的简写例：$("#panel h5.head").bind("mouseover",function(){})

$("#panel h5.head").mouseover(function(){})与ready()的简写类似

3.合成事件

jquery中的两个合成事件hover()方法和toggle()方法，都属于jquery自定义的方法。

hover(enter,leave)；用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数(enter)；当光标移出这个元素时，触发指定的第二个元素(leave)；

toggle(fn1,fn2,fn3,fn4...fnN)方法；用于模拟鼠标连续单机事件。第一次单击元素触发第一个元素，再次单击同一元素触发指定的第二个函数，入果有更多元素则依次触发。直到最后一个，随后的每次单击重复对这几个函数的轮番调用。

toggle()还有个做用是切换元素的课件状态能够替代show(),hide()方法，（我的不同意使用，没有前者可读）

4.事件冒泡

若是一个元素嵌套在另一个元素里而且都绑定了click事件，单击后，会按照DOM层次像水泡同样不断向上直至顶端。

函数中使用事件对象只须要为函数添加一个参数代码以下

$("element").bind("click",function(event){//...});单击element元素,事件对象就被建立了，且事件对象只有事件处理函数能访问到，处理完毕后就被销毁。//事件对象

中止事件冒泡能够阻止事件中其余对象的事件处理函数被执行。用stopPropagation()

只需在函数最后用event.stopPropagation();中止事件冒泡便可，也能够用return false代替//中止事件冒泡

在jquery中用preventDefault()方法阻止默认元素行为。例如表单提交。也能够用return false代替

5.事件对象属性

 (1)event.type该方法用于获取事件的类型。

$("a").click(function(event){

alert(event.type)；//获取事件类型  return false;//阻止连接跳转}）以上代码运行后输出"click"

(2)event.preventDefault  jquery进行封装可兼容各类浏览器，而javascript此方法在IE浏览器中无效

(3)event.stopPropagation   与(2)相同

(4)event.target用于获取到触发事件的元素。

$("a[href='http://google.com']").click(function(event)){var tg=event.target;//获取事件对象

alert(tg.href);return false;}  输出"http://google.com"

(5)event.relatedTarget

(6)event.pageX和event.pageY该方法的做用是获取到光标相对于页面的x坐标和y坐标。

(7)event.which该方法的做用是在鼠标单击事件中获取到鼠标的左中右键，在键盘事件中获取键盘的按键。

(8)event.metaKey为键盘事件中获取<ctrl>按键

6.移出事件

unbind([type],[data])第一个是事件类型，第二个是将要移除的函数

a.若是没有参数则删除全部绑定的事件；b.若是提供了事件类型做为参数，则只删除该类型的绑定事件;c.若是在绑定时传递的处理函数做为第二个参数，则只删除这个特定的事件处理函数

one(type,[data],fn)方法为元素绑定处理函数，处理函数触发一次后当即被删除。只要第一次的单击处理函数执行，以后的单击无效

7.模拟操做   $("$btn").trigger("click")用户进入页面后触发click事件，简化语法$("$#btn").click()

trigger不只可以支持触发浏览器支持的具备相同名称的事件，也能够触发自定义名称事件

传递数据

执行默认操做   若是只想触发绑定的事件，不想执行浏览器的默认操做，能够用triggerHandler()方法如$("input").triggerHandler("focus")  此操做触发input元素上绑定的特定事件，同时取消对此事件的默认操做，即值触发事件。不获得焦点

8.其余用法a.绑定多个事件类型b.添加事件命名空间c.相同事件名称，不一样命名空间执行方法

二.jquery中的动画

 1.show()和hide()

此两种类容控制内容显示隐藏。注意：hide()操做第一步记住display当前值block或inline等，第二部把值改成none；作jquery动画要求在标准模式下；能够为这两个函数设置一个参数，fast:200;normal:400;slow:600;或者单位为毫秒的数字；不过会慢慢增大或减小内容高度宽度及不透明度。

2.fadeIn()和fadeOut()此两方法只改变元素的不透明度，fadeOut在指定的一段时间内下降元素的不透明度，直到元素彻底消失fadeIn()则相反

3.slideUp()和slideDown()只改变高度，若是一个元素的display属性为none ，使用slideDown()元素将由上至下延伸显示，slideUp()相反,由下至上隐藏。动画均可以指定三种参数slow,normal,fast，时间分别是0.6,0.4,0.2，秒，使用速度关键字要加引号，若是是数字就不需

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

语法animate(params,speed,callback);

params:一个包含样式属性及值得映射，如{property1:"value"，property2:"value2"...}；speed：速度参数，可选；callback:在动画完成时执行的函数，可选。

a.自定义简单动画

为了能更改元素的left ,top等样式属性，position样式设置为relative或者absolute

例如设置为relative时$(function(){

$("#panel").click(function(){

$(this).animate({left:"500px"},3000);//加入animate()方法，使元素3秒内向右移动500像素。

});

b.累加、累减动画500px前加上+=或者-=

c.多重动画

例:$("#myImg").click(function(){

$(this).animate({left:"500px",height:"200px"},3000);

});

});

按顺序执行多个动画，只须要把代码拆开而后按顺序写

$(this).animate({left:"500px"},3000);

$(this).animate({height:"200px"},3000);由于animate是对同一个jQuery对象操做，因此也能够改成链式写法$(this).animate({left:"500px"},3000).animate({height:"200px"},3000);

4.综合动画

5.动画回调函数

若是想在最后一步改变元素样式并不能获得预期效果，css()方法会在执行动画的时候就开始执行，由于css()方法并不会加入动画队列中，使用回调函数callback对非动画方法实现排队。只要把css()方法卸载最后一个动画的回调函数里。

callback回调函数适用于全部jquery动画效果方法，$("#element").slideDown("normal",function(){//效果完成后作其余事}）；

6.中止动画和判断是否处于动画状态

a.中止元素动画

若是须要在某处中止动画，须要使用stop()方法，stop()方法的语法结构为：stop([clearQueue],[gotoEnd]);参数都为可选，为boolean值，第一个表明是否要清空未执行完的动画队列，第二个表明是否直接将正在执行的动画跳转到末状态。

直接使用stop()方法，会当即中止当前正在进行的动画，若是接下来还有动画等待继续进行，则以当前状态开始接下来的动画。

stop(true)对多个动画的组合，会在中止第一个动画后，后续未执行的动画队列也都将清空。

后一个动画须要基于前一个动画的末状态时能够经过stop(false,true)使得中止当前动画并直接到达当前动画的末状态。

也能够二者结合起来使用stop(true,true)，即中止当前动画并直接到达末状态，并清空队列。

b.判断元素是否处于动画状态

if(!$(element).is(":animated")){//判断元素是否处于动画状态//入股偶没有则添加新动画}

c.延迟动画

可使用delay()方法对动画进行延迟操做，在animate(0方法后加.delay(1000)

4.其余4个专门用于交互的动画方法

toggle(),slideToggle,fadeTo(),fadeToggle()