使用jquery快速高效制作网页交互特效tp09.pptx

项目案例：当当网上书店第九章

训练的技能点2-1使用open()方法弹出页面使用jQuery选择器访问节点使用jQuery获取页面中的样式属性使用jQuery动态地改变页面元素的样式使用jQuery动态获取或改变页面的内容2/33

训练的技能点2-2使用blur()和focus()事件方法改变文本框失去焦点和获得焦点时的样式，即时地在层中显示提示内容使用正则表达式验证表单内容使用alert()方法弹出提示信息使用定时函数setTimeout()或setInterval()实现轮换广告和循环滚动效果使用数组和jQuery动态地创建DOM，实现级联效果3/33

任务描述系统概述用户可以浏览网站首页，查看图书信息需要实现购物车功能用户可以注册、登录系统角色网站浏览者、注册用户、购书用户提交结果网页文件、样式文件、脚本文件、图片素材演示案例：当当网上书店4/33

难点分析1：jQuery中的循环使用数组、循环实现图书分类显示varbookSort=newArray(……科幻(513),武侠(574)……);varhtml=[];$.each(bookSort,function(i,n){html.push(li·ahref=#class=blue+n+/a/li)});$(“#product_catList_class”).html(html.join());使用each()方法实现循环5/33

难点分析2：实现“书讯快递”图书滚动效果实现“书讯快递”图书滚动效果实现思路使用animate()方法，动态减小marginTop属性的值当减小marginTop减小的值达到第一个图书条目的高度时，则将第一个图书条目移动到最后使用setInterval()不断的执行该过程6/33

项目准备：获取素材并阅读代码6-1该项目素材提供了5个网页：当当网首页图书展示页面购物车页面新用户注册页面用户登录页面7/33

项目准备：获取素材并阅读代码6-2当当网首页8/33

项目准备：获取素材并阅读代码6-3图书展示页面9/33

项目准备：获取素材并阅读代码6-4购物车页面10/33

项目准备：获取素材并阅读代码6-5新用户注册页面11/33

项目准备：获取素材并阅读代码6-6用户登录页面12/33

开发计划用例1：网页特效（首页）[70分钟]用例2：展示图书内容（图书展示页面）[50分钟]用例3：管理购物车中的商品（购物车页面）[50分钟]用例4：用户注册（新用户注册页面）[40分钟]用例5：用户登录（用户登录页面）[30分钟]13/33

用例1：网页特效（首页）3-1需求说明“我的当当”下拉菜单的自动显示与隐藏打开首页时弹出固定大小的广告页面窗口随滚动条上下移动的广告图片指导讲解需求说明14/33

用例1：网页特效（首页）3-2需求说明带数字按钮的循环显示的图片广告Tab切换特效书讯快递无缝隙、循环垂直向上滚动讲解需求说明练习15/33

共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解16/33

用例1：网页特效（首页）3-3“我的当当”下拉菜单能否自动显示与隐藏打开首页时能否弹出广告页面窗口广告图片能否随滚动条上下移动中间的图片广告能否循环显示“最新上架”内容是否实现tab切换特效书讯快递能否自动垂直向上滚动要求互相验证完成的程序功能小组长检查本组完成情况功能测试演示案例：网页特效（首页）17/33

用例2：展示图书内容（图书展示页面）2-1需求说明左侧同级分类列表列表模式和大图模式切换列表模式大图模式讲解需求说明练习18/33

共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解19/33

用例2：展示图书内容（图书展示页面）2-2能否自动生成同级分类列表图书信息能否切换到列表模式图书信息能否切换到大图模式要求互相验证完成的程序功能小组长检查本组完成情况功能测试演示案例：展示图书内容20/33

用例3：管理购物车中的商品（购物车页面）2-1需求说明实现商品列表的显示和隐藏对选购的商品实现删除和修改数量自动计算积分、金额讲解需求说明练习21/33

共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解22/33

商品列表是否实现了显示和隐藏选购的商品能否删除和修改数量能否自动计算积分、金额要求互相验证完成的程序功能小组长检查本组完成情况功能测试演示案例：管理购物车中的商品用例3：管理购物车中的商品（购物车页面）2-223/33

用例4：用户注册（新用户注册页面）2-1需求说明对用户的输入进行验证并提示动态改变输入框的样式地区下拉列表框实现级联效果讲解需求说明练习24/33

共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解25/33

能否对用户