众所周知,页面在加载时,会触发load事件;当用户单击某个按钮时,会触发该按钮的click事件。这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样,通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用 ...
众所周知,页面在加载时,会触发load事件;当用户单击某个按钮时,会触发该按钮的click事件。
这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样,
通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用。
在jQuery中,事件总体分为两大类:简单事件和复合事件。
jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件、鼠标事件、键盘事件、表单事件等,
只是其对应的方法名称有略微不同。
复合事件则是截取组合了用户操作,并且以多个函数作为响应而自定义的处理程序。
下面总结一下jQuery中的简单事件和复合事件。
一、DOM加载事件
页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表
展示两个事件的异同。
执行时机 | window.onload方法 | $(document).ready()方法 |
必须等待所有内容加载完成后才能执行 | 页面的DOM元素绘制完成后可以执行不必等待全部内容加载完成。 |
绑定函数个数 | 该方法能够绑定一个函数,如果绑定多个只能执行最后的一个绑定。例: window.onload=function(){alert("1");} window.onload=function(){alert("2");} 执行结果只执行最后绑定的函数结果是打印:2. | 能够注册多个函数,按绑定顺序执行绑定函数。例: $(document).ready(funtction(){alert("1");}); $().ready(function(){alert("2");}); 执行结果是顺序执行绑定的函数:先打印1.然后再打印2. |
简化写 法 | 无 | $().ready();$.ready() |
1.$(document).ready()含作为动画属性和终值的样式属性和及其值的集合params 对象{},注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left,如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。 duration (可选)三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)easing (可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"callback (可选)Function在动画完成时执行的函数
$(element).hide()这段代码可以与这相等element.css("display","none")
在hide(time)与show(time)中填入事件,可以慢慢消失跟显现。可以修改元素的多个样式,高度,宽度,不透明度。
另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是,当使用hide或者show的时候会改变网页的高度,而fadeIn与fadeOut则不会。
1 $("#panel h5.head").toggle(function(){2 $(this).addClass("highlight");3 $(this).next().fadeOut(1000);4 },function(){5 $(this).removeClass("highlight");6 $(this).next("div .content").fadeIn(1000);7 });
原标题:jQuery中的事件与动画 (你的明天Via Via)
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。