JQuery事件与动画

1、第二章 Jquery事件与动画学习目标1.Jquery事件3.Jquery动画回顾上一章1.列举至少4种基本选择器？2.合并元素集合使用哪种选择器？3.后代选择器和子选择器有什么区别？回顾回顾Jquery事件学习目标1.鼠标事件2.键盘事件Jquery事件 window事件，就是当用户执行某些会影响浏览器的操作时，而触发的事件。例如打开网页时加载页面、关闭窗口、调节窗口大小、移动窗口等操作引发的事件处理。在jQuery中，常用的window事件有文档就绪事件，它对应的方法是ready()。jQuery事件是对JavaScript事件的封装，常用事件分类如下：基础事件：基础事件：window事件

2、鼠标事件键盘事件表单事件复合事件是多个事件的组合：复合事件是多个事件的组合：鼠标光标悬停鼠标连续点击JqueryJquery概述概述回顾我们在学习回顾我们在学习JavaScript时使用的事件有哪些？时使用的事件有哪些？Jquery鼠标事件鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：1.制作网站头部导航条。2.当鼠标悬停每一项导航条时控制背景颜色为蓝色，移开时变为默认值。示例：导航页。参考代码备注部分示例：导航页。参考代码备注部分Jquery键盘事件用户每次按下或者释放键盘上的键时都会产生事件，常用

3、键盘事件有：1.制作登录页面包含用户名与登录密码。2.响应整体界面的事件，如果当键盘按下的时候进行登录操作。示例：响应回车登录示例：响应回车登录密码JQuery表单事件当元素获得焦点时，会触发当元素获得焦点时，会触发focusfocus事件，失去焦点时，会触发事件，失去焦点时，会触发blurblur事件，详见下表：事件，详见下表：1.制作登录页面包含用户名与登录密码。2.当用户名或者密码框失去焦点的时候验证用户名是否长度大于等于7，密码长度是否大于等于7。示例：验证登录示例：验证登录作业一1.制作登录页面包含用户名与登录密码。2.当用户名或者密码框失去焦点的时候验证用户名是否长度大于等于7，密

4、码长度是否大于等于7。3.如果认真错误则该元素背景颜色修改为红色。示例：验证登录示例：验证登录作业二初始状态下，只显示“购物特权”主菜单，点击“购物特权”后显示其下的列表内容，鼠标移动到子菜单上时，子菜单添加背景色。示例：导航栏示例：导航栏事件的绑定与解绑语法规则：$(selector).bind(“事件名称”,function() /函数处理);使用使用bind()bind()方法绑定事件方法绑定事件语法规则语法规则：$(selector).unbind(“事件名称”,fn ();参数意义：参数意义：type:type:事件类型，主要包括：blur、focus、click、mouseout等

5、基础事件，此外，还可以是自定义事件fn:fn:处理函数，用来绑定的处理函数。注：注：当当unbind()unbind()不带参数时，表示移除所绑定的全部事件不带参数时，表示移除所绑定的全部事件使用使用unbind()unbind()方法解绑定事件方法解绑定事件事件类型事件类型鼠标悬停事件hove()hover()hover()方法相当于方法相当于mouseovermouseover与与mouseoutmouseout事件的组合。事件的组合。示例：示例：$(selector)$(selector).hover(function().hover(function() /悬停样式悬停样式 , fun

6、ction() function() / /删除样式删除样式 ););使用使用bind()bind()方法绑定事件方法绑定事件1.当鼠标悬停到省级标签上的时候显示具体省信息，当鼠标移开的时候隐藏具体省的信息。示例：显示下拉省级示例：显示下拉省级作业三鼠标移过导航项时，鼠标所处导航项改变背景图像使用使用toggle()()方法方法鼠标移过导航项时，鼠标所处导航项改变背景图像。示例：页面导航页示例：页面导航页鼠标移过时鼠标移过时Jquery动画学习目标1.隐藏与显示2.淡入淡出3.改变元素高度Jquery隐藏与显示jqueryjquery显示与隐藏显示与隐藏语法：语法：$(selector).sh

7、ow/hide(slowslow);速度：速度：显示速度可以取如下值：毫秒（如1000）、slow、normal、fast点击显示显示图像，点击隐藏按钮隐藏图片。备注参考代码示例：控制图片显示与隐藏示例：控制图片显示与隐藏Jquery改变元素的高度jqueryjquery淡入与淡出淡入与淡出语法：语法：$(selector).fadeIn/fadeOut(slow);速度：速度：显示速度可以取如下值：毫秒（如1000）、slow、normal、fast点击显示显示图像，点击淡出按钮图片淡出。备注参考代码示例：控制图片淡入与淡出示例：控制图片淡入与淡出Jquery改变元素的高度jqueryjqu

8、ery改变元素高度改变元素高度语法：语法：$(selector).slideUp/slideDown(slow);速度：速度：显示速度可以取如下值：毫秒（如1000）、slow、normal、fast点击显示显示图像，点击收缩按钮收缩图片与相反。备注参考代码示例：控制图片收缩示例：控制图片收缩/ /放开放开作业四需求说明：鼠标移过列表项时，背景变为绿色圆角矩形，单击列表标题时，展开节点，再次单击收缩节点。示例：制作示例：制作FAQFAQ列表页列表页本章知识点鼠标事件 c clicklick、mouseovermouseover、mouseoutmouseout键盘事件 keydownkeydown、 keyup keyup、 keypress keypress表单事件 f focusocus、 blur blur复合事件 hoverhover动画 show()show()、hide()hide()、 toggle() toggle()、 fadeIn() fadeIn(