jQuery前端开发任务驱动教程-教学大纲

《jQuery前端开发任务驱动教程》课程教学大纲（课程英文名称）课程编号：学分：学分课时：69课时（其中：讲课40课时上机29课时）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业一、课程的性质与目标jQuery前端开发任务驱动教程是一门面向Web前端开发学习者的课程，用于帮助学生全面掌握jQuery开发技术。本课程以任务驱动模式，循序渐进地讲解了jQuery的相关知识，包括初识jQuery、jQuery实现多样化菜单、jQuery实现页面交互、jQuery实现动画效果、jQuery实现图像效果、jQuery操作表单、jQuery操作Ajax、jQueryMobile移动页面开发和一个在线商城的项目实战。另外，本课程秉承立德树人理念，在案例中融入了许多思想政治内容。通过本课程的学习，不仅可以让学生掌握jQuery的核心知识，还可以培养学生的家国情怀、责任担当和敬业精神。二、课程设计思路和教学要求课程设计理念：通过学习本课程，使学生掌握如何将jQuery与项目开发相结合。按照学习的难易程度及先后顺序安排具体的内容，可以有效地将学生所学的内容串联起来，从而培养学生分析问题和解决问题的能力。课程设计思路：本课程根据知识点难易的先后顺序进行讲解。采用任务驱动式体例，主要包括“任务需求”“知识储备”“任务实现”等，在每个任务中，先对任务进行需求分析，然后在知识储备中讲解实现这个任务需要使用到的知识，并结合示例代码帮助学生理解，最后通过任务实现达到学以致用的目标。学完jQuery的基础知识后，通过一个项目实战将所学内容全部串联起来，培养学生分析和解决问题的能力。操作系统：Windows7或更高版本开发工具：VisualStudioCode、Chrome三、课程的主要内容及基本要求第1章初识jQuery学习单元初识jQuery课时5课时学习目标了解什么是jQuery，能够描述jQuery的特点掌握VisualStudioCode编辑器的下载和安装方法，能够独立完成VisualStudioCode编辑器的下载和安装熟悉jQuery的主要功能，能够归纳jQuery的主要功能掌握$()函数的使用方法，能够灵活运用$()函数创建jQuery对象掌握jQuery对象的使用方法，能够取出jQuery对象中的元素掌握选择器的使用方法，能够灵活应用选择器获取元素掌握on()方法的使用方法，能够使用on()方法实现事件的注册掌握鼠标事件，能够注册鼠标事件掌握css()方法的使用方法，能够使用css()方法设置或获取元素样式掌握jQuery的下载和引入，能够独立完成jQuery的下载和引入掌握jQuery的简单使用，能够使用jQuery实现单击按钮改变诗句文本颜色的效果学习内容知识点掌握程度重点难点什么是jQuery了解VisualStudioCode编辑器掌握任务1.1下载和引入jQuery掌握jQuery的主要功能熟悉$()函数掌握√jQuery对象掌握√选择器掌握√on()方法掌握√鼠标事件掌握√css()方法掌握√任务1.2jQuery的简单使用掌握第2章jQuery实现多样化菜单学习单元jQuery实现多样化菜单课时8课时学习目标掌握显示和隐藏元素的方法，能够使用显示和隐藏元素的方法实现页面特效掌握查找元素的方法，能够灵活应用查找元素的方法查找页面元素掌握元素索引的获取方法，能够使用index()方法获取元素索引掌握利用索引取出元素的方法，能够使用eq()方法从元素集中取出指定索引的元素掌握停止动画的方法，能够灵活应用stop()方法停止元素的动画效果掌握下拉菜单的实现方法，能够完成下拉菜单的开发掌握折叠式菜单的实现方法，能够完成折叠式菜单的开发掌握热卖展示菜单的实现方法，能够完成热卖展示菜单的开发掌握左进左出导航菜单的实现方法，能够完成左进左出导航菜单的开发学习内容知识点掌握程度重点难点显示和隐藏元素的方法掌握√查找元素的方法掌握√√任务2.1下拉菜单掌握任务2.2折叠式菜单掌握√获取元素索引掌握√根据索引取出元素掌握√任务2.3热卖展示菜单掌握停止动画的方法掌握√任务2.4左进左出导航菜单掌握√第3章jQuery实现页面交互（上）学习单元jQuery实现页面交互（上）课时8课时学习目标掌握元素class属性操作，能够灵活应用操作元素class属性的方法掌握元素过滤操作，能够灵活应用元素过滤方法掌握浏览器事件，能够灵活应用常用的浏览器事件掌握元素位置操作，能够灵活应用元素位置操作方法掌握fadeTo()方法的使用方法，能够使用fadeTo()方法调整元素的不透明度掌握元素内容操作，能够灵活应用元素内容操作的方法掌握元素追加操作，能够灵活应用元素追加操作的方法掌握Tab栏切换的实现方法，能够完成Tab栏切换的开发掌握返回页面顶部的实现方法，能够完成返回页面顶部的开发掌握高亮显示图像的实现方法，能够完成高亮显示图像的开发掌握留言板的实现方法，能够完成留言板的开发学习内容知识点掌握程度重点难点元素class属性操作掌握√元素过滤操作掌握√√任务3.1Tab栏切换掌握浏览器事件掌握√元素位置操作掌握√任务3.2返回页面顶部掌握fadeTo()方法掌握√任务3.3高亮显示图像掌握元素内容操作掌握√元素追加操作掌握√√任务3.4留言板掌握第4章jQuery实现页面交互（下）学习单元jQuery实现页面交互（下）课时8课时学习目标掌握自定义动画的方法，能够灵活应用animate()方法自定义动画掌握元素删除操作，能够灵活应用元素删除操作方法掌握元素属性操作，能够灵活应用元素属性操作方法掌握单击页面显示不同词语的实现方法，能够完成单击页面显示不同词语功能的开发掌握随机抽奖的实现方法，能够完成随机抽奖功能的开发掌握随机选图并放大的实现方法，能够完成随机选图并放大功能的开发掌握向上滚动课程更新日志的实现方法，能够完成向上滚动课程更新日志功能的开发学习内容知识点掌握程度重点难点自定义动画掌握√元素删除操作掌握√任务4.1单击页面显示不同词语掌握√任务4.2随机抽奖掌握√元素属性操作掌握√任务4.3随机选图并放大掌握√任务4.4向上滚动课程更新日志掌握√第5章jQuery实现动画效果学习单元jQuery实现动画效果课时7课时学习目标掌握淡入和淡出元素的方法，能够实现元素的淡入和淡出效果掌握上滑和下滑元素的方法，能够实现元素的上滑和下滑效果掌握操作元素尺寸的方法，能够根据实际情况灵活获取元素的尺寸掌握开关灯效果的实现方法，能够通过单击按钮切换灯的开启和关闭状态掌握滑动切换导航菜单效果的实现方法，能够完成滑动切换导航菜单的效果掌握导航栏下划线跟随选中菜单项滑动效果的实现方法，能够完成导航栏下划线跟随选中菜单项滑动的效果学习内容知识点掌握程度重点难点淡入和淡出元素的方法掌握√任务5.1开关灯效果掌握上滑和下滑元素的方法掌握√任务5.2滑动切换导航菜单效果掌握操作元素尺寸的方法掌握√任务5.3导航栏下划线跟随选中菜单项滑动效果掌握第6章jQuery实现图像效果学习单元jQuery实现图像效果课时7课时学习目标掌握removeAttr()方法的使用方法，能够使用removeAttr()方法删除指定元素的一个或多个属性掌握nextAll()方法的使用方法，能够使用nextAll()方法获取指定元素之后的所有同级元素掌握prevAll()方法的使用方法，能够使用prevAll()方法获取指定元素之前的所有同级元素掌握鼠标指针的位置坐标的获取方法，能够使用事件对象中的offsetX、offsetY、clientX和clientY属性来获取鼠标指针的位置掌握星级评价的实现方法，能够完成星级评价功能的开发掌握图像拖曳的实现方法，能够完成图像拖曳功能的开发掌握图像切换的实现方法，能够完成图像切换功能的开发学习内容知识点掌握程度重点难点removeAttr()方法掌握√nextAll()方法掌握√prevAll()方法掌握√任务6.1星级评价掌握鼠标指针的位置坐标掌握任务6.2图像拖曳掌握√任务6.3图像切换掌握√第7章jQuery操作表单学习单元jQuery操作表单课时5课时学习目标掌握表单提交事件的使用方法，能够实现表单提交事件的注册掌握序列化表单数据的方法，能够使用serialize()方法将表单数据序列化为字符串，以及使用serializeArray()方法将表单数据序列化为数组掌握焦点事件的使用方法，能够实现焦点事件的注册掌握改变事件的使用方法，能够实现改变事件的注册掌握键盘事件的使用方法，能够实现键盘事件的注册掌握表单选择器的使用方法，能够使用表单选择器获取表单元素掌握获取用户注册信息的实现方法，能够完成获取用户注册信息的开发掌握表单数据验证的实现方法，能够完成表单数据验证的开发学习内容知识点掌握程度重点难点表单提交事件掌握√序列化表单数据掌握√任务7.1获取用户注册信息掌握焦点事件掌握√改变事件掌握√键盘事件掌握√表单选择器掌握√任务7.2表单数据验证掌握第8章jQuery操作Ajax学习单元jQuery操作Ajax课时7课时学习目标熟悉Ajax的概念，能够归纳Ajax的优势掌握Ajax方法的使用，能够根据不同的场景灵活运用Ajax方法掌握XML数据格式的使用，能够在浏览器端接收服务器返回的XML数据掌握JSON数据格式的使用，能够在浏览器端接收服务器返回的JSON数据掌握事件委派的使用，能够将子元素的事件委派给父元素掌握用户登录的实现，能够完成用户登录的开发掌握用户信息列表的实现，能够完成用户信息列表的开发掌握图书管理系统的实现，能够完成图书管理系统的开发学习内容知识点掌握程度重点难点什么是Ajax熟悉Ajax方法掌握√任务8.1用户登录掌握XML数据格式掌握JSON数据格式掌握√任务8.2用户信息列表掌握事件委派掌握√任务8.3图书管理系统掌握√第9章jQueryMobile移动页面开发学习单元jQueryMobile移动页面开发课时7课时学习目标掌握jQueryMobile的下载和引入，能够独立完成jQueryMobile的下载和引入掌握导航栏组件的使用方法，能够完成导航栏的制作掌握列表视图组件的使用方法，能够完成列表视图的制作掌握选择菜单组件的使用方法，能够完成选择菜单的制作掌握初始化选择菜单的方法，能够完成选择菜单的初始化掌握导航栏的实现方法，能够完成导航栏的开发掌握图书列表页面的实现方法，能够完成图书列表页面的开发掌握日程安排页面的实现方法，能够完成日程安排页面的开发学习内容知识点掌握程度重点难点下载jQueryMobile掌握引入jQueryMobile掌握导航栏组件掌握√任务9.1制作导航栏掌握列表视图组件掌握√任务9.2制作图书列表页面掌握选择菜单组件掌握√初始化选择菜单掌握任务9.3制作日程安排页面掌握第10章项目实战——在线商城学习单元项目实战——在线商城课时7课时学习目标熟悉项目分析，能够归纳项目包含的页面熟悉项目初始化，能够归纳实施初始项目的具体步骤掌握焦点图切换功能的实现方法，能够独立完成代码的编写掌握放大镜功能的实现方法，能够独立完成代码的编写掌握购物车功能的实现方法，能够独立完成代码的编写学习内容知识点掌握程度重点难点任务10.1项目开发准备熟悉任务10.2焦点图切换掌握√任务10.3放大镜掌握√任务10.4购物车掌握√√四、课时分配章目讲课上机合计第1章初识jQuery325第2章jQuery实现多样化菜单448第3章jQuery实现页面交互（上）448第4章jQuery实现页面交互（下）448第5章jQuery实现动画效果437第6章jQuery实现图像效果437第7章jQuery操作表单325第8章jQuery操作Ajax437第9章jQueryMobile移动页面开发437第10章项目实战——在线商城437合计383169五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括