jQuery中的事件与动画

1、jQuery中的事件与动画 第五章 回顾及作业点评回顾及作业点评 列举至少列举至少4种基本选择器？种基本选择器？ 合并元素集合使用哪种选择器？合并元素集合使用哪种选择器？ 后代选择器和子选择器有什么区别？后代选择器和子选择器有什么区别？ 提问提问 2/34 预习检查预习检查 mouseover()、mouseout()分别是什么事件？分别是什么事件？ 再列举至少再列举至少3个个jQuery中的常用事件中的常用事件 在在jQuery中使用什么方法隐藏元素？中使用什么方法隐藏元素？ 提问提问 3/34 本章任务本章任务 制作左导航特效制作左导航特效 制作登录框特效制作登录框特效 制作团购网主导航制

2、作团购网主导航 制作制作FAQ列表页列表页 制作当当网我的订单页制作当当网我的订单页 4/34 本章目标本章目标 使用常用简单事件制作网页特效使用常用简单事件制作网页特效 使用鼠标事件制作主导航特效使用鼠标事件制作主导航特效 使用键盘事件制作表单特效使用键盘事件制作表单特效 使用使用hover()制作下拉菜单特效制作下拉菜单特效 使用鼠标事件及动画制作弹出对话框使用鼠标事件及动画制作弹出对话框 5/34 网页中的事件网页中的事件 和和winform一样，在网页中的事件也是实现和一样，在网页中的事件也是实现和 用户交互的基础用户交互的基础 例如例如tab页切换效果，可以通过鼠标点击事件页切换效果

3、，可以通过鼠标点击事件 来实现来实现 点击选项卡，切换点击选项卡，切换 6/34 jQuery中的事件中的事件 jQuery事件是对事件是对JavaScript事件的封装，常事件的封装，常 用事件分类如下：用事件分类如下： 基础事件基础事件 window事件事件 鼠标事件鼠标事件 键盘事件键盘事件 表单事件表单事件 复合事件是多个事件的组合复合事件是多个事件的组合 鼠标光标悬停鼠标光标悬停 鼠标连续点击鼠标连续点击 7/34 鼠标事件鼠标事件 鼠标事件是当用户在文档上移动或单击鼠标鼠标事件是当用户在文档上移动或单击鼠标 时而产生的事件，常用鼠标事件有：时而产生的事件，常用鼠标事件有： 方法方法

4、描述描述执行时机执行时机 click( )触发或将函数绑定到指定元素的触发或将函数绑定到指定元素的 click事件事件 单击鼠标时单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的触发或将函数绑定到指定元素的 mouse over事件事件 鼠标移过时鼠标移过时 mouseout( )触发或将函数绑定到指定元素的触发或将函数绑定到指定元素的 mouse out事件事件 鼠标移出时鼠标移出时 8/34 实现主导航特效实现主导航特效 $(#nav li).mouseover(function() $(this). addClass(“heightlight”); ); 以以mouse

5、over()为例，实现鼠标移过时特效为例，实现鼠标移过时特效 当鼠标移过元素时当鼠标移过元素时 演示演示示例示例1：主导航特效：主导航特效 为事件添加响应方法为事件添加响应方法 鼠标所在的元素鼠标所在的元素 9/34 键盘事件键盘事件 用户每次按下或者释放键盘上的键时都会产用户每次按下或者释放键盘上的键时都会产 生事件，常用键盘事件有：生事件，常用键盘事件有： 方法方法描述描述执行时机执行时机 keydown( )触发或将函数绑定到指定元素的触发或将函数绑定到指定元素的 keydown事件事件 按下键盘时按下键盘时 keyup( )触发或将函数绑定到指定元素的触发或将函数绑定到指定元素的 ke

6、yup事件事件 释放按键时释放按键时 keypress( )触发或将函数绑定到指定元素的触发或将函数绑定到指定元素的 keypress事件事件 产生可打印产生可打印 的字符时的字符时 10/34 键盘事件键盘事件 $(document).keydown(function (event) if (event.keyCode = 13) alert(确认要提交么？); ); 以以keydown ()为例，实现按键时特效为例，实现按键时特效 当键盘被按下时当键盘被按下时 演示演示示例示例2：键盘事件：键盘事件 事件对象事件对象event中中 封装了事件的参数封装了事件的参数 如果是回车键如果是回车键

7、 11/34 表单事件表单事件 当元素获得焦点时，会触发当元素获得焦点时，会触发focus事件，失去事件，失去 焦点时，会触发焦点时，会触发blur事件，详见下表：事件，详见下表： 方法方法描述描述执行时机执行时机 focus( )触发或将函数绑定到指定元素的触发或将函数绑定到指定元素的 focus事件事件 获得焦点获得焦点 blur( )触发或将函数绑定到指定元素的触发或将函数绑定到指定元素的blur 事件事件 失去焦点失去焦点 12/34 表单事件表单事件 $(name=member).focus(function() $(this).addClass(input_focus); ); 以

8、以focus ()为例，实现获得焦点时特效为例，实现获得焦点时特效 当元素获得焦点时当元素获得焦点时 演示演示示例示例3：表单事件：表单事件 通过添加样式改变文本框背景色通过添加样式改变文本框背景色 13/34 学员操作学员操作制作左导航特效制作左导航特效 需求说明需求说明 初始状态下，只显示初始状态下，只显示“购物特权购物特权”主菜单，点击主菜单，点击“购物特权购物特权” 后显示其下的列表内容，鼠标移动到子菜单上时，子菜单添加后显示其下的列表内容，鼠标移动到子菜单上时，子菜单添加 背景色背景色 练习练习 完成时间完成时间：25分钟分钟 14/34 学员操作学员操作制作登录框特效制作登录框特效

9、 需求说明需求说明 文本框获得焦点时，文本框边框的显示效果（颜色）改变文本框获得焦点时，文本框边框的显示效果（颜色）改变 练习练习 完成时间完成时间：15分钟分钟 15/34 共性问题集中讲解共性问题集中讲解 常见问题及解决办法常见问题及解决办法 代码规范问题代码规范问题 调试技巧调试技巧 16/34 绑定事件绑定事件 除了使用事件名绑定事件外，还可以使用除了使用事件名绑定事件外，还可以使用 bind()方法方法 $(inputname=event_1).bind(click,function() $(p).css(background-color,#F30); ); 事件类型事件类型处理函数

10、处理函数 演示演示示例示例4：绑定单个事件：绑定单个事件 17/34 绑定多个事件绑定多个事件 bind()方法还可以同时为多个事件绑定方法方法还可以同时为多个事件绑定方法 $(inputname=event_1).bind( mouseover: function () $(ul).css(display, none); , mouseout: function () $(ul).css(display, block); ); 为为mouseover绑定方法绑定方法 为为mouseout绑定方法绑定方法 演示演示示例示例5：绑定多个事件：绑定多个事件 18/34 移除事件移除事件 移除事件使

11、用移除事件使用unbind()方法，其语法如下：方法，其语法如下： unbind(type,fn) 当unbind()不带参数时，表示移除所绑定的全部事件 参数参数含义含义描述描述 type事件类型事件类型主要包括：主要包括：blur、focus、click、 mouseout等基础事件，此外，还可以是等基础事件，此外，还可以是 自定义事件自定义事件 fn处理函数处理函数用来绑定的处理函数用来绑定的处理函数 提示提示 19/34 鼠标光标悬停事件鼠标光标悬停事件 hover()方法相当于方法相当于mouseover与与mouseout 事件的组合事件的组合 $(#myaccound).hove

12、r(function() $(#menu_1).css(display,block); , function() $(#menu_1).css(display,none); ); 光标移入时触发光标移入时触发 演示演示示例示例6：复合事件：复合事件 光标移出时触发光标移出时触发 20/34 鼠标连续鼠标连续click事件事件 toggle()方法用于模拟鼠标连续方法用于模拟鼠标连续click事件事件 $(body).toggle( function () , function () , function () ); 第一次点击触发第一次点击触发 演示演示示例示例6：复合事件：复合事件 第二次点

13、击触发第二次点击触发 第三次点击触发第三次点击触发 21/34 学员操作学员操作制作团购网主导航制作团购网主导航 需求说明需求说明 鼠标移过导航项时，鼠标所处导航项改变背景图像鼠标移过导航项时，鼠标所处导航项改变背景图像 练习练习 完成时间完成时间：20分钟分钟 鼠标移过时鼠标移过时 22/34 共性问题集中讲解共性问题集中讲解 常见问题及解决办法常见问题及解决办法 代码规范问题代码规范问题 调试技巧调试技巧 23/34 jQuery动画效果动画效果 jQuery提供了很多动画效果，如：提供了很多动画效果，如： 控制元素显示与隐藏控制元素显示与隐藏 控制元素淡入淡出控制元素淡入淡出 改变元素高

14、度改变元素高度 24/34 显示及隐藏元素显示及隐藏元素 show() 在显示元素时，能定义显示元素时的在显示元素时，能定义显示元素时的 效果，如显示速度效果，如显示速度 $(.tipsbox).show(slow); 以较慢的速度显示元素以较慢的速度显示元素 演示演示示例示例7：删除提示特效：删除提示特效 显示速度可以取如下值：毫秒（如1000）、slow、 normal、fast 提示提示 25/34 切换元素可见状态切换元素可见状态 toggle()除了可以模拟鼠标的连续单击事件外除了可以模拟鼠标的连续单击事件外 ，还能用于切换元素的可见状态，还能用于切换元素的可见状态 $(li:gt(

15、5):not(:last).toggle(); 演示演示示例示例8：可伸缩的菜单：可伸缩的菜单 26/34 淡入淡出效果淡入淡出效果 fadeIn()和和fadeOut()可以通过改变元素的透可以通过改变元素的透 明度实现淡入淡出效果明度实现淡入淡出效果 $(inputname=fadein_btn).click(function() $(img).fadeIn(slow); ); $(inputname=fadeout_btn).click(function() $(img).fadeOut(1000); ); 演示演示示例示例9：淡入淡出效果：淡入淡出效果 以较慢的速度淡入以较慢的速度淡入

16、 以以1000毫秒的速度淡出毫秒的速度淡出 27/34 改变元素的高度改变元素的高度 slideDown() 可以使元素逐步延伸显示，可以使元素逐步延伸显示， slideUp()则使元素逐步缩短直至隐藏则使元素逐步缩短直至隐藏 $(h2).click(function() $(.txt).slideUp(slow); $(.txt).slideDown(slow); ); 演示演示示例示例10：改变元素高度：改变元素高度 28/34 学员操作学员操作制作制作FAQ列表页列表页 需求说明需求说明 鼠标移过列表项时，背景变为绿色圆角矩形，单击列表标题时鼠标移过列表项时，背景变为绿色圆角矩形，单击列

17、表标题时 ，展开节点，再次单击收缩节点，展开节点，再次单击收缩节点 练习练习 完成时间完成时间：15分钟分钟 29/34 学员操作学员操作制作当当网我的订单页制作当当网我的订单页 需求说明需求说明 鼠标鼠标移过鼠标鼠标移过“我的当当我的当当”时，出现下拉菜单，鼠标移出时，时，出现下拉菜单，鼠标移出时， 下拉菜单隐藏下拉菜单隐藏 单击单击“我的订单我的订单”，显示其下相关内容；单击，显示其下相关内容；单击“我的团购订单我的团购订单 ”，显示其下相关内容，切换显示其下相关内容时，以速度为，显示其下相关内容，切换显示其下相关内容时，以速度为 1800毫秒的淡入显示毫秒的淡入显示 练习练习 完成时间完成时间：25分钟分钟 30/34 共性问题集中讲解共性问题集中讲解 常见问题及解决办法常见问题及解决办法 代码规范问题代码规范问题 调试技巧调试技巧 31/34 总结总结 鼠标事件鼠标事件 click、mouseover、mouseout 键盘事件键盘事件 keydown、 keyup、 keypress 表单事件表单事件 focus、 blur 复合事件复合事件 hover、