《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 表单验证
《Web交互开发》实验教学指导/实验六: jQuery高级应用 要求: 请将上述主要代码,填写到实验报告册中 2、图片滚动 (1)实现图片滚动效果,样式如图所示6-2所示。 (6 傅盛:生物学思维给我的四个启示 图6-2图片滚动 (2)请完成下面的任务 任务一:编写代码实现如图6-2所示代码。(10分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、图片放大效果的实现 (1)编写代码,实现如图6-3所示 △ 图6-3图片放大效果 本讲共计3页当前第2页
《Web 交互开发》实验教学指导 / 实验六：jQuery 高级应用 本讲共计 3 页 | 当前第 2 页 要求： 请将上述主要代码，填写到实验报告册中。 2、图片滚动 （1）实现图片滚动效果，样式如图所示 6-2 所示。 （2）请完成下面的任务： 任务一：编写代码实现如图 6-2 所示代码。（10 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、图片放大效果的实现 （1）编写代码，实现如图 6-3 所示。 图 6-2 图片滚动 图 6-3 图片放大效果
《Web交互开发》实验教学指导/实验六: jQuery高级应用 (2)完成下述任务。 任务一:编写图片放大效果程序。(10分) 要求 请将上述实验任务的主要代码,填写到实验报告册中。 六、自主实验步骤(20分) 1、日历的使用 (1)编写页面显示如图6-4所示,设置开始日期和结束日期,结束日期的时间不能小于开始日 期 开始日期 结束日期 o十-√|2018√ 周 三四五六日 3 4556789101 4612131415161710 471920212232425 图64日历 (2)完成下述任务 任务一:完成页面的编写。(10分) 任务二:完成日期事件的设置。(15分) 要求 请将完成上述任务的步骤,填写到实验报告册中 七、思考及问答(20分) 1、除实验所用插件,再列举三个不同的 jQuery插件,并说明其用途?(5分) 2、什么是DOM对象,举例说明?(5分) 3、什么是 jQuery对象,举例说明?(5分) 4、 JavaScript类库中除了 jQuery库,列举两个 JavaScript库。(5分) 本讲共计3页|当前第3页
《Web 交互开发》实验教学指导 / 实验六：jQuery 高级应用 本讲共计 3 页 | 当前第 3 页 （2）完成下述任务。 任务一：编写图片放大效果程序。（10 分） 要求： 请将上述实验任务的主要代码，填写到实验报告册中。 六、自主实验步骤（20 分） 1、日历的使用 （1）编写页面显示如图 6-4 所示，设置开始日期和结束日期，结束日期的时间不能小于开始日 期。 （2）完成下述任务。 任务一：完成页面的编写。（10 分） 任务二：完成日期事件的设置。（15 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、除实验所用插件，再列举三个不同的 jQuery 插件，并说明其用途？（5 分） 2、什么是 DOM 对象，举例说明？（5 分） 3、什么是 jQuery 对象，举例说明？（5 分） 4、JavaScript 类库中除了 jQuery 库，列举两个 JavaScript 库。（5 分） 图 6-4 日历