Jquery中的事件与动画

一:Jquery中的事件 加载DOM事件:

　　　　(1)执行时机:Window.onload()方法实在网页中所有的元素完全加载到浏览器后才执行.而jquery中的$(document).ready()方法注册的事件处理程序,在DOM完全就绪时可以直接调用.

　　　　(2)执行次数:Window.onload()方法只执行一次,而$(document).ready()方法可以执行多次.

　　　　 (3)简约写法:

　　　　　　  Window.onload()方法没有简约写法,

　　　　　　　而$(documen).ready()方法有三种简写方法,并且这三种方法完全等价.

　　　　　　   分别是:$(document).ready(function(){}),

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

　　　　　　　　     $(function(){}).

             事件绑定:

　　　　　　　　(1)方法:bind(type,[data],fn),type表示事件类型,data可选参数,作为event.data属性值传递给事件对象的的额外数据对象.fn表示用来绑定的处理函数.

　　　　　　　　(2)作用:为对象注册事件.

　　　　　　　　(3)对比:Jquery中的事件绑定类型比普通的javascript事件绑定事件类型少了on,如鼠标单击事件在jquery中对应的click事件,在javascript中对应的是onclick事件.

　　　　　　　　(4)绑定方法还用one()方法,它与bind()方法一样,只不过one()方法只有一次,bind()可以有多次.

　　　　　　　　　　　　合成事件:

　　　　　　　　　　　　(1)方法:hover()方法用于模拟光标悬浮事件,是mouseover()和mouseout()方法事件的组合.toggle()方法用于模拟鼠标连续单击事件,不停循环处理函数.

　　　　　　　　　　　　(2)togger()方法的作用:当没有参数时,注册该事件在显示和隐藏状态之间不停的切换.

　　　　　　　　　　 　  (3)定义:多个事件组合在一起使用. 事件冒泡:

　　　　　　　　　　　　　　　　 (1)定义:当DOM树不同的层级绑定相同的事件,当某一层级的事件触发,该层上部的绑定了该事件的层级都会触发该类型的事件. 　　 　　　　　　　　　　　　　　　(2)方法:stopPropagation()方法用于停止事件冒泡,只能触发该层级的事件,而其它层级不会触发,还可以使用return false来停止事件冒泡. preventDefaut()方法用于阻止默认行为,即阻止DOM对象的默认行为.

　　　　　　　　　　　　　　　　 (3)注释:stopPropagation()方法与preventDefault()方法都需要参数来调用,而这个参数实在fn处理函数中传入的.

　　　　　　　　　　　　　　　　 事件对象的属性:

　　　　　　　　　　　　　　　　(1)作用:对事件对象的常用属性进行封装,使得事件处理函数在各大浏览器下都可以正常运行,不需要对浏览器进行类型判断.

　　　　　　　　　　　　　　　　(2)方法:都需要参数来调用,而这个参数是fn处理函数传入的,

　　　　　　　　　　　　　　　　　　 type()方法:该方法用于获取到事件的类型.

　　　　　　　　　　　　　　　　　 　preventDefault()方法:该方法用于阻止默认的事件行为.

　　　　　　　　　　　　　　　　　 　stopProPagaion()方法:该方法用于阻止事件冒泡.

　　　　　　　　　　　　　　　　　　 target()方法:该方法用于获取到触发事件的元素。

　　　　　　　　　　　　　　　　　　 relaedTarge()方法:

　　　　　　　　　　　　　　　　　　　　该方法用于对jquery进行封装,使之能兼容各种浏览器.

　　　　　　　　　　　　　　　　　　 pageX()与pageY()方法:

　　　　　　　　　　　　　　　　　　　　该放过的用于获取到光标对相对与页面的X坐标和Y坐标.

　　　　　　　　　　　　　　　　　　 which()方法:

　　　　　　　　　　　　　　　　　　　　该方法用于在鼠标单击事件中获取到鼠标的左,中,右键,在键盘事件中获取键盘的按键.

　　　　　　　　　　　　　　　　　　metaKey()方法:

　　　　　　　　　　　　　　　　　　　　该方法用于获取触发事件时键盘的键值.

　　　　　　　　　　　　　　　　　　originaIEvent()方法:

　　　　　　　　　　　　　　　　　　　　该方法用于指向原始的事件对象. 移除事件:

　　　　　　　　　　　　　　　　　　　　(1)作用:移除元素上已经注册的事件(移除特定的事件类型).

　　　　　　　　　　　　　　　　　　　  (2)方法:onBind([type],[data])方法,type表示事件类型,data表示将要移除的函数.如果没有参数,则删除所有的绑定事件.

　　　　　　　　　　　　　　 模拟操作:

　　　　　　　　　　　　　　　　(1)方法:trigger(type,[data]),type表示要触发的事件类型,data表示要传递给事件处理函数的附加数据,以数组形式传递. 　　　　　　　　　　　　　　　　　　　　　　triggerHandler()方法:

　　　　　　　　　　　　　　　　　　　　　　该方法触发元素上绑定的特定事件,同时取消浏览器对此事件的默认操作.

　　　　　　　　　　　　　　　　 (2)作用:模拟事件操作. jquery中的动画:

　　　　　　　　　　　　　　　　　　　　(1)作用:通过jquery中的动画方法,给网页添加精彩的视觉效果.

　　　　　　　　　　　　　　　　　　　　 (2)方法: show(speed,callback)与hide(speed,callback)方法是jquery中最基本的动画方法,用于显示和隐藏对象,speed表示动画执行的时间,

　　　　　　　　　　　　　　　　　　　　　　　　　　callback表示动画执行完时的处理函数.执行的时间:

　　　　　　　　　　　　　　　　　　　　　　　　　　slow表示元素在600毫秒内显示和隐藏,normal表示元素在400毫秒内显示和隐藏,

　　　　　　　　　　　　　　　　　　　　　　　　　　fast表示元素在200毫秒内显示和隐藏.

　　　　　　　　　　　　　　　　　　　　　　　　　  fadeIn(speed,callback)和fadeOut(speed,callback)方法:作用:只改变元素的不透明度.

　　　　　　　　　　　　　　　　　　　　　　　　　　fadeOut()方法相反.

　　　　　　　　　　　　　　　　　　　　　　　　　　 slideUp(speed,callback)和slideDown(speed,callback)方法:作用:改变元素的高度.

　　　　　　　　　　　　　　　　　　　　　　　　　　 slideUp()表示元素将由上到下缩短隐藏,

　　　　　　　　　　　　　　　　　　　　　　　　　　slideDown()方法表示元素将由下到上的扩展显示.

　　　　　　　　　　　　　　　　　　　　　　　　　  animate(params,speed,callback)方法:表示自定义动画,

　　　　　　　　　　　　　　　　　　　　　　　　　　params表示样式属性及值的映射,如：{top:"100px",left:"+=100px"},

　　　　　　　　　　　　　　　　　　　　　　　　　　speed表示速度,callback表示回调函数.即事件处理函数.

　　　　　　　　注意:在使用animate()方法之前,为了影响该元素的top,left,bottom,right样式属性,必须先把元素的 position样式设置为relative或者absolute.还需将整个多余的内容页用overflow样式设置hidde隐藏起来.

　　　　　　　　　　　　　　　　　　　　　　　　　　 stop([clearQueue],gotoEnd)方法:作用:停止动画.clearQueue表示是否清空执行完的动画列队,gotoEnd表示是否直接将正在执行的动画跳转到末状态. $(element).is(":animated")表示该对象是否在执行动画.

 

下面是Jquery中的事件与动画的具体内容，全屏观看，请点击：Jquery中的事件与动画