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为延时值，单位是毫秒，当超过延时值时，动画开始执行。