jquery基本事件
jquery基本事件
页面加载时触发ready()事件
ready()方法类似于onload()事件,但前者只要页面的dom结构加载后触发,而后者需要页面全部元素加载成功才触发,ready可以写多个,其按顺序执行。
$(document).ready(function(){$('#tip').html('加载完毕');});
。使用hover方法切换事件
hover方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切换效果。
$(selector).hover(over,out)
。使用toggle()方法绑定多个函数
toggle()方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,绑定多个函数的调用格式
$(selector).toggle(fun1,fun2,······funN)
。使用unbind()方法移除移除元素绑定事件
$(selector).unbind(event,fun)
,其中参数event表示需要移除的事件名称,多个事件用空格隔开,fun参数为事件执行时调用的函数名称,如果没有规定参数,unbind()方法会删除指定元素的所有事件处理程序。使用one()方法绑定元素的一次性事件
one()方法可以绑定元素任何有效的事件,但这种方法的绑定事件只会触发一次。
$(selector).one(event,[data],fun)
,参数event为事件名称,dada为触发事件时携带的数据,fun为触发该事件时执行的函数。调用trigger方法手动触发指定事件。
trigger方法可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义事件。总之,该事件必须能执行。
文本框的focus和blur事件
focus事件在元素获取焦点时触发,如点击文本框时触发该事件;而blur事件则在元素失去焦点时触发。
下拉列表框的change事件
当一个元素的值发生变化时,将会触发change事件。
调用live()方法绑定事件
与bind相同,live可以绑定元素的可执行事件,除此之外,live方法还可以绑定动态元素,即是使用代码添加的元素事件。
调用show()和hide()方法显示和隐藏元素
$(selector).hide(speed,[callback])
和$(selector).show(speed,[callback])
,参数speed设置隐藏或显示的速度值,可为’slow’,’fast’或毫秒数值。可选参数callback为隐藏或显示动作执行完成后调用的函数。使用slideUp和slideDown方法的滑动效果
前者用于向上滑动元素,后者用于向下滑动元素,调用方法为
$(selector).slideUp(speed,[callback])
和$(selector).slideDown(speed,[callback])
,其中speed为滑动时的速度,单位是毫秒,可选参数是滑动成功后的回调函数。使用slideToggle方法
该方法可以切换slideUp和slideDown,即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,向下滑动。
$(selector).slideToggle(speed,[callback])
。使用fadeIn()和fadeOut()实现淡入与淡出
$(selector).fadeIn(speed,[callback])
和$(selector).fadeOut(speed,[callback])
。使用fadeTo()方法设置淡入淡出效果的不透明度
调用fadeTo()方法,可以将所选元素的不透明度以淡入淡出的效果调整为指定的值。
$(selector).fadeTo(speed,opacity,[callback])
,其中speed参数为效果的速度,opacity参数为指定的不透明度,取值为0~1,可选参数callback为效果完成后回调的函数。调用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!');});});
。调用stop方法停止当前动画效果
stop()方法的功能是在动画完成前,停止当前正在执行的动画效果,这些效果包括滑动,淡入淡出和自定义动画。
$(selector).stop([clearQueue],[goToEnd])
。调用delay()方法延迟执行动画效果
$(selector).delay(duration)
,其中duration为延时值,单位是毫秒,当超过延时值时,动画开始执行。