使用jquery快速高效制作网页交互特效tp05.pptx

jQuery中的事件与动画第五章

回顾及作业点评列举至少4种基本选择器？合并元素集合使用哪种选择器？后代选择器和子选择器有什么区别？提问2/32

预习检查mouseover()、mouseout()分别是什么事件？再列举至少3个jQuery中的常用事件在jQuery中使用什么方法隐藏元素？提问3/32

本章目标使用常用简单事件制作网页特效使用鼠标事件制作主导航特效使用键盘事件制作表单特效使用hover()制作下拉菜单特效使用鼠标事件及动画制作弹出对话框4/32

网页中的事件和winform一样，在网页中的事件也是实现和用户交互的基础例如tab页切换效果，可以通过鼠标点击事件来实现点击选项卡，切换div5/32

jQuery中的事件jQuery事件是对JavaScript事件的封装，常用事件分类如下：基础事件window事件鼠标事件键盘事件表单事件复合事件是多个事件的组合鼠标光标悬停鼠标连续点击6/32

鼠标事件鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：方法描述执行时机click()触发或将函数绑定到指定元素的click事件单击鼠标时mouseover()触发或将函数绑定到指定元素的mouseover事件鼠标移过时mouseout()触发或将函数绑定到指定元素的mouseout事件鼠标移出时7/32

实现主导航特效$(#navli).mouseover(function(){$(this).addClass(“heightlight”);});以mouseover()为例，实现鼠标移过时特效当鼠标移过元素时演示示例1：主导航特效为事件添加响应方法鼠标所在的元素8/32

键盘事件用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：方法描述执行时机keydown()触发或将函数绑定到指定元素的keydown事件按下键盘时keyup()触发或将函数绑定到指定元素的keyup事件释放按键时keypress()触发或将函数绑定到指定元素的keypress事件产生可打印的字符时9/32

键盘事件$(document).keydown(function(event){if(event.keyCode==13){alert(确认要提交么？);}});以keydown()为例，实现按键时特效当键盘被按下时演示示例2：键盘事件事件对象event中封装了事件的参数如果是回车键10/32

表单事件当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：方法描述执行时机focus()触发或将函数绑定到指定元素的focus事件获得焦点blur()触发或将函数绑定到指定元素的blur事件失去焦点11/32

表单事件$([name=member]).focus(function(){$(this).addClass(input_focus);});以focus()为例，实现获得焦点时特效当元素获得焦点时演示示例3：表单事件通过添加样式改变文本框背景色12/32

学员操作—制作左导航特效需求说明初始状态下，只显示“购物特权”主菜单，点击“购物特权”后显示其下的列表内容，鼠标移动到子菜单上时，子菜单添加背景色练习完成时间：25分钟13/32

学员操作—制作登录框特效需求说明文本框获得焦点时，文本框边框的显示效果（颜色）改变练习完成时间：15分钟14/32

共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解15/32

绑定事件除了使用事件名绑定事件外，还可以使用bind()方法$(input[name=event_1]).bind(click,function(){$(p).css(background-color,#F30);});事件类型处理函数演示示例4：绑定单个事件16/32

绑定多个事件bind()方法还可以同时为多个事件绑定方法$(input[name=event_1]).bind({mouseover:function(){ $(ul).css(display,none);},mouseout:function(){ $(ul).css(display,block);}});为mouseover绑定方法为mouseout绑定方法演示示例5：绑定多个事件17/32

移除事件移除事件使用unbind()方法，其语法如下：unbind([type],[fn])当unbind()不带参数时，表示移除所绑定的全部事件参数含义描述[type]事件类型主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件[fn