jquery基本事件

jquery基本事件

jquery基本事件

  1. 页面加载时触发ready()事件

    ready()方法类似于onload()事件,但前者只要页面的dom结构加载后触发,而后者需要页面全部元素加载成功才触发,ready可以写多个,其按顺序执行。$(document).ready(function(){$('#tip').html('加载完毕');});

  2. 使用hover方法切换事件

    hover方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切换效果。$(selector).hover(over,out)

  3. 使用toggle()方法绑定多个函数

    toggle()方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,绑定多个函数的调用格式$(selector).toggle(fun1,fun2,······funN)

  4. 使用unbind()方法移除移除元素绑定事件

    $(selector).unbind(event,fun),其中参数event表示需要移除的事件名称,多个事件用空格隔开,fun参数为事件执行时调用的函数名称,如果没有规定参数,unbind()方法会删除指定元素的所有事件处理程序。

  5. 使用one()方法绑定元素的一次性事件

    one()方法可以绑定元素任何有效的事件,但这种方法的绑定事件只会触发一次。$(selector).one(event,[data],fun),参数event为事件名称,dada为触发事件时携带的数据,fun为触发该事件时执行的函数。

  6. 调用trigger方法手动触发指定事件。

    trigger方法可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义事件。总之,该事件必须能执行。

  7. 文本框的focus和blur事件

    focus事件在元素获取焦点时触发,如点击文本框时触发该事件;而blur事件则在元素失去焦点时触发。

  8. 下拉列表框的change事件

    当一个元素的值发生变化时,将会触发change事件。

  9. 调用live()方法绑定事件

    与bind相同,live可以绑定元素的可执行事件,除此之外,live方法还可以绑定动态元素,即是使用代码添加的元素事件。

  10. 调用show()和hide()方法显示和隐藏元素

    $(selector).hide(speed,[callback])$(selector).show(speed,[callback]),参数speed设置隐藏或显示的速度值,可为’slow’,’fast’或毫秒数值。可选参数callback为隐藏或显示动作执行完成后调用的函数。

  11. 使用slideUp和slideDown方法的滑动效果

    前者用于向上滑动元素,后者用于向下滑动元素,调用方法为$(selector).slideUp(speed,[callback])$(selector).slideDown(speed,[callback]),其中speed为滑动时的速度,单位是毫秒,可选参数是滑动成功后的回调函数。

  12. 使用slideToggle方法

    该方法可以切换slideUp和slideDown,即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,向下滑动。$(selector).slideToggle(speed,[callback])

  13. 使用fadeIn()和fadeOut()实现淡入与淡出

    $(selector).fadeIn(speed,[callback])$(selector).fadeOut(speed,[callback])

  14. 使用fadeTo()方法设置淡入淡出效果的不透明度

    调用fadeTo()方法,可以将所选元素的不透明度以淡入淡出的效果调整为指定的值。$(selector).fadeTo(speed,opacity,[callback]),其中speed参数为效果的速度,opacity参数为指定的不透明度,取值为0~1,可选参数callback为效果完成后回调的函数。

  15. 调用animate()方法制作简单的动画效果

    格式为$(selector).animate({params},speed,[callback])。其中,params参数为制作动画效果的css属性名与值,speed参数为动画的效果速度,单位为毫秒,可选项callback参数为动画效果完成后执行的回调函数。$('img').animate({left: '+=90px',3000,function(){$(this).animate({width:'+=30px',height:'+=30px'},3000,function(){$('#tip').html('done!');});});

  16. 调用stop方法停止当前动画效果

    stop()方法的功能是在动画完成前,停止当前正在执行的动画效果,这些效果包括滑动,淡入淡出和自定义动画。$(selector).stop([clearQueue],[goToEnd])

  17. 调用delay()方法延迟执行动画效果

    $(selector).delay(duration),其中duration为延时值,单位是毫秒,当超过延时值时,动画开始执行。