jQuery中的事件和动画

一、学习目的

使用常用简单事件制作网页特效。

使用鼠标事件制作主导航特效。

使用hover( )方法制作下拉菜单特效。

使用鼠标事件及动画制作页面特效。

二、jQuery中的事件

jQuery事件是对JavaScript事件的封装，常用事件分类。

基础事件（鼠标事件，键盘事件，window事件，表单事件）：

鼠标事件：用户在文档上移动或者点击鼠标时而产生的事件。

click( )：单击鼠标时。

mouseover( )：鼠标指针移过时。

mouseout( )：鼠标指针移出时。

mouseenter( )：鼠标指针进入时（一瞬间，在边框的哪里的一点小距离内，在列表框中移动，列表框都会消失。）。

mouseleave( )：鼠标指针离开时（同上。）。

键盘事件：用户每次按下或者释放键盘都会产生的事件。

keydown( )：按下键盘时。

keyup( )：释放按键时。

keypress( )：产生可打印的字符时。

浏览器事件（调整窗口大小时，完成页面特效）：$(selector).resize( );

复合事件（鼠标光标悬停，鼠标连续点击）：

hover（）：hover()方法相当于mouseover与mouseout事件的组合      hover(enter,leave);

toggle（）：toggle()方法用于模拟鼠标连续click事件      toggle(fn1,fn2,...,fnN);

 toggle()方法不带参数，与show( )和hide( )方法作用一样

toggleClass( )可以对样式进行切换

网页中的事件：和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现。

三、绑定事件与移除事件

绑定事件：bind(type,[data],fn);

绑定单个事件：$(".on").bind("mouseover",function(){}；

绑定多个事件：$(".top-m .on").bind({ mouseover:function(){},mouseout:function(){}});

移除事件：unbind([type],[fn])

当unbind()不带参数时，表示移除所绑定的全部事件。

四、jQuery动画效果（以下方法的参数为可填，用slow、normal、fast等）

控制元素显示与隐藏：

show（）控制元素的显示，hide（）控制元素的隐藏。

改变元素的透明度：

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果。

改变元素高度：

slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏。

自定义动画

五、总结

      现在开始理论知识开始越来越少了，这也就意味着实践很重要，很多东西和问题都要在实践中慢慢的发现。给我的感觉就是现在才是开始真正学习的时候，之前的内容主要是记忆，而这里则是拉开差距的地方了。