jQuery中的事件与动画

jQuery中的事件与动画第五章回顾及作业点评列举至少4种基本选择器？合并元素集合使用哪种选择器？后代选择器和子选择器有什么区别？提问2/34预习检查mouseover()、mouseout()分别是什么事件？再列举至少3个jQuery中的常用事件在jQuery中使用什么方法隐藏元素？提问3/34本章任务制作左导航特效制作登录框特效制作团购网主导航制作FAQ列表页制作当当网我的订单页4/34本章目标使用常用简单事件制作网页特效使用鼠标事件制作主导航特效使用键盘事件制作表单特效使用hover()制作下拉菜单特效使用鼠标事件及动画制作弹出对话框5/34网页中的事件和winform一样，在网页中的事件也是实现和用户交互的基础例如tab页切换效果，可以通过鼠标点击事件来实现点击选项卡，切换<div>6/34jQuery中的事件jQuery事件是对JavaScript事件的封装，常用事件分类如下：基础事件window事件鼠标事件键盘事件表单事件复合事件是多个事件的组合鼠标光标悬停鼠标连续点击7/34鼠标事件鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：方法描述执行时机click()触发或将函数绑定到指定元素的click事件单击鼠标时mouseover()触发或将函数绑定到指定元素的mouseover事件鼠标移过时mouseout()触发或将函数绑定到指定元素的mouseout事件鼠标移出时8/34实现主导航特效$("#navli").mouseover(function(){

$(this).

addClass(“heightlight”);});以mouseover()为例，实现鼠标移过时特效当鼠标移过元素时演示示例1：主导航特效为事件添加响应方法鼠标所在的元素9/34键盘事件用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：方法描述执行时机keydown()触发或将函数绑定到指定元素的keydown事件按下键盘时keyup()触发或将函数绑定到指定元素的keyup事件释放按键时keypress()触发或将函数绑定到指定元素的keypress事件产生可打印的字符时10/34键盘事件

$(document).keydown(function(event){

if(event.keyCode=="13"){alert("确认要提交么？");

}});以keydown()为例，实现按键时特效当键盘被按下时演示示例2：键盘事件事件对象event中封装了事件的参数如果是回车键11/34表单事件当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：方法描述执行时机focus()触发或将函数绑定到指定元素的focus事件获得焦点blur()触发或将函数绑定到指定元素的blur事件失去焦点12/34表单事件$("[name=member]").focus(function(){$(this).addClass("input_focus");});以focus()为例，实现获得焦点时特效当元素获得焦点时演示示例3：表单事件通过添加样式改变文本框背景色13/34学员操作—制作左导航特效需求说明初始状态下，只显示“购物特权”主菜单，点击“购物特权”后显示其下的列表内容，鼠标移动到子菜单上时，子菜单添加背景色练习完成时间：25分钟14/34学员操作—制作登录框特效需求说明文本框获得焦点时，文本框边框的显示效果（颜色）改变练习完成时间：15分钟15/34共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解16/34绑定事件除了使用事件名绑定事件外，还可以使用bind()方法$("input[name=event_1]").bind("click",function(){$("p").css("background-color","#F30");});事件类型处理函数演示示例4：绑定单个事件17/34绑定多个事件bind()方法还可以同时为多个事件绑定方法$("input[name=event_1]").bind({mouseover:function(){ $("ul").css("display","none");},mouseout:function(){ $("ul").css("display","block");}});为mouseover绑定方法为mouseout绑定方法演示示例5：绑定多个事件18/34移除事件移除事件使用unbind()方法，其语法如下：unbind([type],[fn])当unbind()不带参数时，表示移除所绑定的全部事件参数含义描述[type]事件类型主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件[fn]处理函数用来绑定的处理函数提示19/34鼠标光标悬停事件hover()方法相当于mouseover与mouseout事件的组合$("#myaccound").hover(function(){$("#menu_1").css("display","block");

},

function(){$("#menu_1").css("display","none");

});光标移入时触发演示示例6：复合事件光标移出时触发20/34鼠标连续click事件toggle()方法用于模拟鼠标连续click事件$("body").toggle(function(){},function(){},function(){});第一次点击触发演示示例6：复合事件第二次点击触发第三次点击触发21/34学员操作—制作团购网主导航需求说明鼠标移过导航项时，鼠标所处导航项改变背景图像练习完成时间：20分钟鼠标移过时22/34共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解23/34jQuery动画效果jQuery提供了很多动画效果，如：控制元素显示与隐藏控制元素淡入淡出改变元素高度24/34显示及隐藏元素show()在显示元素时，能定义显示元素时的效果，如显示速度$(".tipsbox").show("slow");以较慢的速度显示元素演示示例7：删除提示特效显示速度可以取如下值：毫秒（如1000）、slow、normal、fast提示25/34切换元素可见状态toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态$("li:gt(5):not(:last)").toggle();演示示例8：可伸缩的菜单26/34淡入淡出效果fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果$("input[name=fadein_btn]").click(function(){$("img").fadeIn("slow");});$("input[name=fadeout_btn]").click(function(){$("img").fadeOut(1000);});演示示例9：淡入淡出效果以较慢的速度淡入以1000毫秒的速度淡出27/34改变元素的高度slideDown()可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏$("h2").click(function(){$(".txt").slideUp("slow");$(".txt").slideDown("slow");});演示示例10：改变元素高度28/34学员操作—制作FAQ列表页需求说明鼠标移过列表项时，背景变为绿色圆角矩形，单击列表标题时，展开节点，再次单击收缩节点练习完成时间：15分钟29/34学员操作—制作当当网我的订单页需求说明鼠标鼠标移过“我的当当”时，出现下拉菜单，鼠标移出时，下拉菜单隐藏单击“我的订单”，显示其下相关内容；单击“我的团购订单”，显示其下相关内容，切换显示其下相关内容时，以速度为1800毫秒的淡入显示练习完成时间：25分钟30/34共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解31/34总结鼠标事件click、mouseover、mouseout键盘事件keydown、keyup、keypress表单事件focus、blur复合事件hover