Wdb交互开发》实验教学指导/实验五:AAX3 < div class="item">删除商品</div> </dd> <dt>订单管理</dt> <dd> < div class="item">订单查询</div> < div class:="item"删除订单</div> K/dd < dt class=" title")< a href="#")退出系统</a/dt </dl> <div id=bottom>/div> </body> (3)请完成下面的任务 任务一:编写 jQuery代码完成如图42-1与42-2所示的效果。(5分) 任务二:如何实现元素的淡入淡出效果?(2分) 任务三:使用 animate()方法可以创建自定义动画,它可以带有几个参数,分 别表示什么意思?(3分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、使用插件实现表单验证 (1)从官网上下载插件,实现如图4-3-1、4-3-2所示的表单验证功能 请输入下列资料 请输入下列资料 用户名 必选字段 输入正确格式电子邮件 提交 图4-3-1表单 必选字段 匚提交 图4-3-2表单验证 (2)请完成下面的任务: 任务一:开发代码,显示效果如图4-3-1所示。(5分) 任务二:点击提交按钮实现检测用户名、邮箱、网址都不能为空?(4分) 任务三:点击提交按钮,检测用户名不能少于5个字符。(3分) 任务四:点击提交按钮,验证邮箱与网址的格式正确。(3分) 本讲共计5页当前第3页《Web 交互开发》实验教学指导 / 实验五 :AJAX 本讲共计 5 页 | 当前第 3 页 <div class="item">删除商品</div> </dd> <dt>订单管理</dt> <dd> <div class="item">订单查询</div> <div class="item">删除订单</div> </dd> <dt class="title"><a href="#">退出系统</a></dt> </dl> <div id="bottom"></div> </body> (3)请完成下面的任务: 任务一:编写 jQuery 代码完成如图 4-2-1 与 4-2-2 所示的效果。(5 分) 任务二:如何实现元素的淡入淡出效果?(2 分) 任务三:使用 animate()方法可以创建自定义动画,它可以带有几个参数,分 别表示什么意思?(3 分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 3、使用插件实现表单验证 (1)从官网上下载插件,实现如图 4-3-1、4-3-2 所示的表单验证功能。 (2)请完成下面的任务: 任务一:开发代码,显示效果如图 4-3-1 所示。(5 分) 任务二:点击提交按钮实现检测用户名、邮箱、网址都不能为空?(4 分) 任务三:点击提交按钮,检测用户名不能少于 5 个字符。(3 分) 任务四:点击提交按钮,验证邮箱与网址的格式正确。(3 分) 图 4-3-1 表单 图 4-3-2 表单验证