《Web交互开发》实验教学指导/实验四: jQuery编程应用 《Web交互开发》实验教学指导 实验四: jQuery编程应用 、实验目的(5分) 1、掌握 jQuery事件应用的方法; 2、掌握 jQuery动画效果的使用方法 3、掌握 jQuery插件的使用方法 4、理解 jQuery编写程序的思路; 二、实验环境(5分) 1、 Windows XP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成网页选项卡 2、完成伸缩式导行菜单 3、使用插件进行表单验证功能 4、图片放大效果的实现; 四、实验原理(5分) 1、 jQuery事件的使用; 2、 jQuery动画效果的实现 3、 jQuery插件的使用 五、实验步骤(40分) 1、网页选项卡的应用 (1)网页选项卡:通过单击标题实现内容隐藏或显示的切换。具体效果如图4-1所示: 家居电器二手 迎您来到电器城 图4-1网页选项卡 (2)部分代码如下: script type="text/javascript"> S( S"#menu li").each(function(index)i 本讲共计5页|当前第1页
《Web 交互开发》实验教学指导 / 实验四 ：jQuery 编程应用 本讲共计 5 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验四：jQuery 编程应用 一、实验目的（5 分） 1、掌握 jQuery 事件应用的方法； 2、掌握 jQuery 动画效果的使用方法； 3、掌握 jQuery 插件的使用方法； 4、理解 jQuery 编写程序的思路； 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成网页选项卡； 2、完成伸缩式导行菜单； 3、使用插件进行表单验证功能； 4、图片放大效果的实现； 四、实验原理（5 分） 1、jQuery 事件的使用； 2、jQuery 动画效果的实现； 3、jQuery 插件的使用； 五、实验步骤（40 分） 1、网页选项卡的应用 （1）网页选项卡：通过单击标题实现内容隐藏或显示的切换。具体效果如图 4-1 所示： （2）部分代码如下： $(function() { $("#menu li").each(function(index) { 图 4-1 网页选项卡
《Web交互开发》实验教学指导/实验四: jQuery编程应用 S"#menu li tab Focus"). remove Class("tab Focus"); S(this). add Class("tabFocus") S("#c siblings.hide(: /div> 用户管理 添加用户 删除用息 本讲共计5页当前第2页
《Web 交互开发》实验教学指导 / 实验四 ：jQuery 编程应用 本讲共计 5 页 | 当前第 2 页 $(this).click(function() { $("#menu li.tabFocus").removeClass("tabFocus"); / $(this).addClass("tabFocus"); $("#content li:eq(" + index + ")").show() .siblings().hide(); }); }); }) （3）请完成以下任务： 任务一：对上述脚本代码进行逐行注释。（3 分） 任务二：列举 jQuery 中事件绑定的方法？（2 分） 任务三：将上述代码改为通过鼠标移动至标题来实现内容的隐藏或显示。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、伸缩式导航菜单 （1）伸缩式导航菜单如图 4-2-1，4-2-2 所示。 （2）部分如下所示： 用户管理 添加用户 删除用息 图 4-2-1 伸缩式菜单 1 图 4-2-2 伸缩式菜单 2
《Web交互开发》实验教学指导/实验四: jQuery编程应用 K/dd 商品管理 添加商品 修改商品 删除商品 订单管理 订单查询 (3)请完成下面的任务 任务一:编写 jQuery代码完成如图42-1与42-2所示的效果。(5分) 任务二:如何实现元素的淡入淡出效果?(2分) 任务三:使用 animate()方法可以创建自定义动画,它可以带有几个参数,分 别表示什么意思?(3分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、使用插件实现表单验证 (1)从官网上下载插件,实现如图4-3-1、4-3-2所示的表单验证功能。 请输入下列资料 请输入下列资料 用户名 邮箱: 必选字段 网址 邮箱 输入正确格式电子邮件 提交 图4-3-1表单 必选字段 匚提交 图4-3-2表单验证 共计5页当前第3页
《Web 交互开发》实验教学指导 / 实验四 ：jQuery 编程应用 本讲共计 5 页 | 当前第 3 页 商品管理 添加商品 修改商品 删除商品 订单管理 订单查询 删除订单 退出系统 （3）请完成下面的任务： 任务一：编写 jQuery 代码完成如图 4-2-1 与 4-2-2 所示的效果。（5 分） 任务二：如何实现元素的淡入淡出效果？（2 分） 任务三：使用 animate（）方法可以创建自定义动画，它可以带有几个参数，分 别表示什么意思？（3 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、使用插件实现表单验证 （1）从官网上下载插件，实现如图 4-3-1、4-3-2 所示的表单验证功能。 图 4-3-1 表单 图 4-3-2 表单验证
《Web交互开发》实验教学指导/实验四: jQuery编程应用 4 (2)请完成下面的任务: 任务一:开发代码,显示效果如图4-3-1所示。(5分) 任务二:点击提交按钮实现检测用户名、邮箱、网址都不能为空?(4分) 任务三:点击提交按钮,检测用户名不能少于5个字符。(3分) 任务四:点击提交按钮,验证邮箱与网址的格式正确。(3分) 任务五:列举其他至少三种常用的插件,并简单介绍其用途。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 1、文章排版的实现 (1)页面如图44-1和44-2所示。 (2)完成下述任务。 任务一:完成页面的编写。(5分) 任务二:编写 jQuery实现如图4-4-1与4-42的效果。(5分) 要求 请将完成上述任务的步骤,填写到实验报告册中。 背影 背影 作者:朱自青/创作时间:1925年 作者:朱自清/创作时间:1925年 我与父亲不相见已二年余了,我最不能忘记的是他的背影。那 我与父亲不相见已二年余了,我最不能忘记的是他的背影。那 年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子, 年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子, 我从北京到徐州,打算跟看父亲奔丧回家。到徐州见看父亲,看见 我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见 海狼藉的东西,又想起祖母,不梦地流下眼泪。父亲 满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲 说,“郭如比,不必难过,好在天无绝人之路!” 说,“事如比,不必难过,好在天无绝人之路!” 回家变卖曲质,父亲还了亏空;又借钱办了丧事。这些日子 家中光景很是惨修淡,一半为了丧事,一半为了父亲赋闲。丧事完 图4-4-1背影1 毕,父亲要到南京谋事,我也要回北京念书,我们同行 图4-42背影 2、图片放大效果的实现 (1)页面如图45所示。 (2)完成下述任务。 任务一:完成页面的编写。(5分 任务二:编写 jQuery插件实现如图4-5效果。(5分) 本讲共计5页|当前第4页
《Web 交互开发》实验教学指导 / 实验四 ：jQuery 编程应用 本讲共计 5 页 | 当前第 4 页 （2）请完成下面的任务： 任务一：开发代码，显示效果如图 4-3-1 所示。（5 分） 任务二：点击提交按钮实现检测用户名、邮箱、网址都不能为空？（4 分） 任务三：点击提交按钮，检测用户名不能少于 5 个字符。（3 分） 任务四：点击提交按钮，验证邮箱与网址的格式正确。（3 分） 任务五：列举其他至少三种常用的插件，并简单介绍其用途。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、文章排版的实现。 （1）页面如图 4-4-1 和 4-4-2 所示。 （2）完成下述任务。 任务一：完成页面的编写。（5 分） 任务二：编写 jQuery 实现如图 4-4-1 与 4-4-2 的效果。（5 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 2、图片放大效果的实现。 （1）页面如图 4-5 所示。 （2）完成下述任务。 任务一：完成页面的编写。（5 分） 任务二：编写 jQuery 插件实现如图 4-5 效果。（5 分） 图 4-4-1 背影 1 图 4-4-2 背影 2
《Web交互开发》实验教学指导/实验四: jQuery编程应用 kipling 图45图片放大 七、思考及问答(20分) 1、s( document) ready方法和 window. onload有什么区别?(5分) 2、 jQuery中的 hover(0和 toggle有什么区别?(5分) 3、 jQuery中的事件冒泡是怎么执行的,如何停止冒泡事件的发生?(5分) jQuery中$get提交和 S posto提交有什么区别?(5分) 本讲共计5页|当前第5页
《Web 交互开发》实验教学指导 / 实验四 ：jQuery 编程应用 本讲共计 5 页 | 当前第 5 页 七、思考及问答（20 分） 1、$(document).ready()方法和 window.onload 有什么区别？（5 分） 2、jQuery 中的 hover()和 toggle()有什么区别？（5 分） 3、jQuery 中的事件冒泡是怎么执行的，如何停止冒泡事件的发生？（5 分） 4、jQuery 中$.get()提交和$.post()提交有什么区别？（5 分） 图 4-5 图片放大