《Web交互开发》实验教学指导/实验六: jQuery高级应用 《Web交互开发》实验教学指导 实验六: jQuery高级应用 、实验目的(5分) 1、掌握 jQuery事件的使用: 2、掌握 jQuery插件的使用 3、理解 jQuery编写程序的方法 二、实验环境(5分) 1、 Windows XP/Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成表单验证界面; 2、完成图片滚动 3、完成图片放大效果 四、实验原理(5分) jQuery事件的使用 3、 jQuery插件的使用。 五、实验步骤(40分) 1、使用插件实现表单验证 (1)下载 jQuery插件,实现表单验证功能,如图6-1-1和6-1-2所示 请输入下列资料 请输入下列资料 用户名 否输入正确格式日子曲件 提交 必选字段 理交 图6-1-1网页选项卡 图6-1-2表单验证 (2)请完成下面的任务: 任务一:编写代码完成表格的HIML编写;(5分) 任务二:点击提交按钮实现检测用户名、邮箱、网址都不能为空?(5分) 任务三:点击提交按钮,检测用户名不能少于5个字符。(5分) 任务四:点击提交按钮,验证邮箱与网址的格式正确。(5分) 本讲共计3页|当前第1页《Web 交互开发》实验教学指导 / 实验六：jQuery 高级应用 本讲共计 3 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验六：jQuery 高级应用 一、实验目的（5 分） 1、掌握 jQuery 事件的使用； 2、掌握 jQuery 插件的使用； 3、理解 jQuery 编写程序的方法。 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成表单验证界面； 2、完成图片滚动； 3、完成图片放大效果； 四、实验原理（5 分） 1、jQuery 事件的使用； 3、jQuery 插件的使用。 五、实验步骤（40 分） 1、使用插件实现表单验证 （1）下载 jQuery 插件，实现表单验证功能，如图 6-1-1 和 6-1-2 所示。 （2）请完成下面的任务： 任务一：编写代码完成表格的 HTML 编写；（5 分） 任务二：点击提交按钮实现检测用户名、邮箱、网址都不能为空？（5 分） 任务三：点击提交按钮，检测用户名不能少于 5 个字符。（5 分） 任务四：点击提交按钮，验证邮箱与网址的格式正确。（5 分） 图 6-1-1 网页选项卡 图 6-1-2 表单验证