第七章 jQuery中的事件与动画.pptx

第七章 jQuery中的事件与动画预习检查集中测试在jQuery中使用什么方法隐藏元素？在jQuery中使用什么方法可控制元素的淡入和淡出？简述toggle( )的两大功能到目前为止所学习的jQuery自定义的方法有哪些？/41回顾及作业点评列举至少4种基本选择器？后代选择器和子选择器有什么区别？写出使用jQuery选择器获取页面中所有超链接中包含“jingyue”的元素页面中有一个id为nav的无序列表，使用jQuery选择器设置列表前三个li背景颜色为蓝色点评作业的提交情况和共性问题提问作业点评/41本章任务制作京东首页右侧固定层仿京东左侧菜单制作京东常见问题分类页面/41本章目标使用常用简单事件制作网页特效使用鼠标事件制作主导航特效使用hover( )方法制作下拉菜单特效使用鼠标事件及动画制作页面特效/41网页中的事件和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现点击选项卡，切换<div>/41jQuery中的事件jQuery事件是对JavaScript事件的封装，常用事件分类基础事件鼠标事件键盘事件window事件表单事件复合事件鼠标光标悬停鼠标连续点击/41鼠标事件鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件方法描述执行时机click( )触发或将函数绑定到指定元素的click事件单击鼠标时mouseover( )触发或将函数绑定到指定元素的mouseover事件鼠标指针移过时mouseout( )触发或将函数绑定到指定元素的mouseout事件鼠标指针移出时mouseenter( )触发或将函数绑定到指定元素的mouseenter事件鼠标指针进入时mouseleave( )触发或将函数绑定到指定元素的mouseleave事件鼠标指针离开时/41制作当当导航页面以mouseover( ) 与mouseout( )方法为例，实现导航菜单当鼠标移过菜单时示例$(".nav-ul a").mouseover(function(){ $(this).css("background-color","#f01e28");});$(".nav-ul a").mouseout(function(){ $(this).css("background-color","#ff2832");});当鼠标移出菜单时演示示例1：当当图书导航/41鼠标事件方法的区别方法相同点不同点mouseover( )鼠标进入被选元素时会触发鼠标在其被选元素的子元素上来回进入时：触发mouseover( )不触发mouseentermouseenter( )mouseout( ) 鼠标离开被选元素时会触发鼠标在其被选元素的子元素上来回离开时：触发mouseout不触发mouseleavemouseleave( )键盘事件用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件方法描述执行时机keydown( )触发或将函数绑定到指定元素的keydown事件按下键盘时keyup( )触发或将函数绑定到指定元素的keyup事件释放按键时keypress( )触发或将函数绑定到指定元素的keypress事件产生可打印的字符时/41键盘事件当释放键盘时以键盘事件为例，实现按键时特效 $("[type=password]").keyup(function () { $("#events").append("keyup"); }).keydown(function (e) { $("#events").append("keydown"); }).keypress(function () { $("#events").append("keypress"); });$(document).keydown(function (event) { if (event.keyCode == "13") { alert("确认要提交么？"); }});示例当按下键盘时向密码框输入字符时按回车键时演示示例2：键盘事件/41浏览器事件 $(selector).resize( );语法调整窗口大小时，完成页面特效/41学员操作—制作京东首页右侧固定层2-1练习需求说明制作京东首页右侧的固定层，6个图标：京东会员、购物车、我的关注、我的足迹、我的消息和咨询JIMI默认状态下仅显示图标，背景颜色为深灰色；当鼠标移至图标上时，背景颜色为深红色，并且显示文本讲解需求说明/41学员操作—制作京东首页右侧固定层2-2练习实现思路使用列表制作页面内容，使用<span>和<p>分别显示背景图片和文本内容使用index( ) 获取当前鼠标移至元素在列表中的索引值，使用eq( )获取当前元素所在<li>使用同辈元素选择器和eq( )选择器获取当