你的位置:首页 > 软件开发 > Java > jQuery中的事件与动画 (你的明天Via Via)

jQuery中的事件与动画 (你的明天Via Via)

发布时间:2016-05-21 04:00:03
众所周知,页面在加载时,会触发load事件;当用户单击某个按钮时,会触发该按钮的click事件。这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样,通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用 ...

jQuery中的事件与动画                (你的明天Via Via)

众所周知,页面在加载时,会触发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 (#换成@)。

可能感兴趣文章

我的浏览记录