《jQuery开发基础/WebAPI》教学（实验）大纲

课程代码：59010116                        开课学期：二学年二学期

适用专业：软件专业                         学    时：72

编写教师：彭春富 石红春                        学    分：4.5

审  核：杨振华

第一部分  说  明

一、课程的性质、作用

jQuery是一个兼容多浏览器的JavaScript框架，核心理念是write less,do more(写的更少,做的更多)。如今，jQuery已经成为最流行的JavaScript框架，已经成为Web开发领域的事实标准，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手，极大地提高了他们的开发效率。而且jQuery是免费、开源的，jQuery的语法设计可以使开发者使用起来更加便捷，其模块化的使用方式可以使开发者很轻松的开发出功能强大的静态或动态网页，可以讲jQuery技术已经成为了目前Web开发的必备技术之一。

本课程内容主要包括JavaScript基本语法、jQuery选择器、jQuery事件、jQuery效果等，同时也包含了一些常见插件的使用等方面。

由于本课程会用到Web开发的一些基础知识，学习本门课程的学生至少要熟悉html、div+css、JavaScript、DOM等课程内容。

二、课程的任务与基本要求

本课程的目目标是使学生通过学习，掌握如何使用jQuery技术开发设计高效、方便的Web程序页面，以便给Web开发人员以编码应用震撼，给Web页面最终访问用户以视觉震撼，来提升Web页面访问量，让学生真正理解jQuery的确做到了“写的更少,做的更多”。

本课程的任务是：

1、明确Web开发中,jQuery能做什么

2、掌握jQuery事件驱动编程的开发思路与语法格式

3、理解jQuery文档就绪函数存在的必要性

4、掌握常用的元素选择器\样式选择器\属性选择器的用法

5、熟悉jQuery常用事件函数

6、掌握jQuery常用动态效果函数的使用方法

7、熟练使用jQuery操作Web页面中html元素

8、掌握jQuery操作表单的各种操作方法,包括文本框\单选\复选\下拉框等

9、掌握jQuery中常用的Ajax操作函数

10、熟悉常见的jQuery应用举例

三、教学方法建议

本课程是一门实践性很强的课程，动手实践才是掌握本课程的最有效途径，建议通过理论和实践相结合的教学方式，使学生掌握jQuery。在教学实施过程中，应以的小案例为基础，将理论知识有机地贯穿于各案例之中，通过对案例的仔细分析以及展示案例最终效果，使学生掌握和学会使用jQuery技术。

四、本课程与其它课程的关系

本课程会用到Web开发的一些基础知识，学习本门课程的学生至少要熟悉html、div+css、JavaScript、DOM等课程内容。

五、本课程与专业核心技术、能力培养的关系及作用

jQuery是一个优秀的JavaScript框架，深受全球Web开发者欢迎，已经成为Web开发领域的事实标准。为了提高Web开发的效率和强化Web应用的功能，熟练使用jQuery是Web开发者必备的一种能力。

第二部分  本  文

一、基本内容与学时分配

（一）jQuery基础知识

   1、jQuery基础知识············································································ （2学时）

教学内容要点：（1）JavaScript和JavaScript库（2）jQuery的作用及优势（3）搭建jQuery开发环境（4）jQuery程序代码风格

（二）jQuery选择器

1、选择器概述················································································· （2学时）

教学内容要点：（1）选择器（2）选择器的优势

2、jQuery选择器·············································································· （6学时）

教学内容要点：（1）基本选择器（2）层次选择器（3）简单过滤选择器（4）内容过滤选择器（5）可见性过滤选择器（6）属性过滤选择器（7）子元素过滤选择器（8）表单选择器（9）表单对象属性过滤选择器

3、选择器应用················································································· （2学时）

教学内容要点：（1）选择器综合应用示例

（三）jQuery操作DOM

1、访问元素···················································································· （2学时）

教学内容要点：（1）元素属性操作（2）元素内容操作（3）获取或设置元素值（4）元素样式操作

2、操作DOM节点············································································ （2学时）

教学内容要点：（1）创建节点（2）查找节点（3）插入节点（4）删除、复制和替换节点（5）遍历节点

3、jQuery操作DOM应用···································································· （2学时）

教学内容要点：（1）jQuery操作DOM应用示例

（四）jQuery中的事件与应用

1、jQuery事件处理············································································ （4学时）

教学内容要点：（1）事件机制（2）页面载入事件（3）绑定事件（4）切换事件（5）移除事件

2、jQuery事件应用············································································ （8学时）

教学内容要点：（1）表单应用（2）列表应用（3）网页选项卡应用（4）事件综合应用

（五）jQuery的动画与特效

1、jQuery的动画与特效······································································ （4学时）

教学内容要点：（1）显示与隐藏（2）滑动（3）淡入淡出（4）自定义动画

2、动画与特效应用············································································ （4学时）

教学内容要点：（1）各动画方法比较（2）动画与特效综合应用

（六）使用jQuery操作表单和表格

1、jQuery操作表单元素······································································ （2学时）

教学内容要点：（1）文本框（2）文本域（3）单选按钮和复选框（4）下拉列表框（5）表单验证

2、jQuery操作表格············································································ （2学时）

教学内容要点：（1）控制表格颜色显示（2）表格的展开与关闭（3）表格内容的筛选

3、表单与表格操作应用······································································ （4学时）

教学内容要点：jQuery操作表单和表格应用示例

（七）Ajax在jQuery中的应用

1、加载异步数据·············································································· （2学时）

教学内容要点：（1）Ajax技术概述（2）load方法（3）getJSON方法（4）getScript方法

2、请求服务器数据············································································ （2学时）

教学内容要点：（1）使用$.get()请求数据（2）使用$.post()请求数据（3）使用serialize()序列化表单数据

3、Ajax中的全局事件········································································ （2学时）

教学内容要点：（1）Ajax全局事件的参数和功能（2）ajaxStart与ajaxStop全局事件

4、Ajax应用···················································································· （2学时）

教学内容要点：（1）Ajax综合应用

（八）jQuery中常用插件及其应用

1、认识jQuery插件··········································································· （2学时）

教学内容要点：（1）插件概述（2）插件下载（3）插件使用（4）插件的工作原理（5）常用插件列表

2、常用插件使用·············································································· （6学时）

教学内容要点：（1）折叠面板（2）自动完成（3）按钮（4）日期选择器（5）对话框（6）菜单（7）进度条（8）滑块（9）旋转器（10）标签页（11）工具提示框

3、插件综合应用·············································································· （4学时）

教学内容要点：（1）插件综合应用示例

（九）jQuery在网站开发中综合应用

1、用jQuery设计开发网站··································································· （8学时）

教学内容要点：（1）网站设计开发一般流程；（2）jQuery综合应用

二、技术能力培养目标、措施、步骤

1、本课程的教学目标是：通过理论和实践相结合的教学方式，使学生熟练掌握jQuery技术，并能使用jQuery技术设计开发Web应用程序。

F知识教学目标：学会jQuery的一些相关知识，尤其是选择器、DOM操作方法、事件处理机制等。

F能力教学目标：在jQuery的一些基础知识之上，能够熟练使用相关技术设计开发Web应用。

F思想教育目标：此课程是前端非常重要的一部分，让学生养成良好的编码习惯，培养团队合作精神。

2、由于课程实践性很强，在教学过程中必须认真贯彻理论联系实际的原则，提倡授课中针对典型案例进行分析与讨论，并给学生布置任务作为以培养学生运用理论分析和解决实际问题的能力。

三、课程实验

   （一）实验仪器设备、主要技术指标及配置要求

   （二）实验项目一览表

（三）综合性、设计性、研究创新性实验介绍

实验1  认识jQuery框架（验证型）

1、实验目的

目的：熟悉jQuery框架。

任务：1、下载jQuery；

2、配置并编写简单的jQuery应用；

3、熟悉jQuery的代码风格。

4、jQuery操作DOM对象

2、实验内容与基本要求

（1）实验内容与要求：

根据提供的实验需求，遵循jQuery代码规范，编写简单的jQuery应用。熟悉相应的软件开发工具及应用环境。

（2）查阅jQuery的官方网站，查阅jQuery 官方文档，熟悉jQuery的使用。

3.、主要仪器设备材料

（1）需要准备一台带有浏览器、能够访问因特网的计算机。

（2）相关的开发工具。

实验2  选择器应用（设计型）

1、实验目的

目的：依据要求，熟练使用jQuery选择器获取页面元素。

任务：1、基本选择器应用。

2、层次选择器应用

3、过滤器选择器应用（简单过滤器、内容过滤器、可见性过滤器、属性过滤器）

4、表单选择器应用

2、实验内容与基本要求

（1）实验内容与要求：

根据提供任务需求设计开发Web应用程序。掌握jQuery中常用选择器的应用；熟悉Web应用的一般开发流程。巩固和提高对Html标签，JavaScript语言和CSS样式的使用。熟练掌握Web应用开发工具。

（2）查阅jQuery的官方网站，查阅jQuery 官方文档，熟悉jQuery的使用。

3.、主要仪器设备材料

（1）需要准备一台带有浏览器、能够访问因特网的计算机。

（2）相关的开发工具。

实验3  DOM操作及元素样式操作（设计型）

1、实验目的

目的：依据要求，熟练使用jQuery操作和处理DOM元素。

任务：1、掌握DOM操作的分类。

2、熟练使用jQuery对页面元素的内容和值进行操作

3、熟练使用jQuery操作DOM节点元素，包括：创建节点、插入节点、删除节点、复制节点、替换节点和遍历节点等。

2、实验内容与基本要求

（1）实验内容与要求：

根据提供任务需求设计开发Web应用程序，掌握DOM文档结构；熟练使用jQuery操作页面元素的内容、值、样式和属性等；熟练使用jQuery操作页面节点元素；通过与传统方法的比较，明确jQuery在操作DOM元素的优点。

（2）查阅jQuery的官方网站，查阅jQuery 官方文档，熟悉jQuery的使用。。

3.、主要仪器设备材料

（1）需要准备一台带有浏览器、能够访问因特网的计算机。

（2）相关的开发工具。

实验4  jQuery中的事件处理（设计型）

1、实验目的

目的：依据要求，掌握jQuery事件处理机制。

任务：1、掌握页面加载相应事件。

2、掌握jQuery的ready()方法的工作原理及几种不同的书写方式

3、熟练使用jQuery技术，给元素绑定事件、移除事件绑定、模拟用户操作以及掌握事件冒泡机制等。

2、实验内容与基本要求

（1）实验内容与要求：

根据提供任务需求设计开发Web应用程序，掌握页面加载相应事件；熟悉jQuery中常用的事件及其相关主要参数、使用方式、触发时机等；熟练使用jQuery给页面的元素绑定事件、移除事件绑定、模拟用户操作等；掌握事件冒泡机制及关闭该机制；通过与传统方法的比较，明确jQuery在操作事件方面的优越性。

（2）查阅jQuery的官方网站，查阅jQuery 官方文档，熟悉jQuery的使用。。

3.、主要仪器设备材料

（1）需要准备一台带有浏览器、能够访问因特网的计算机。

（2）相关的开发工具。

实验5  jQuery的动画与特效（设计型）

1、实验目的

目的：依据要求，掌握jQuery动画与特效处理技巧。

任务：1、掌握通过jQuery技术，实现页面、页面元素的动画和特效处理技巧，提升用户的体验度。

2、熟练使用jQuery技术，实现页面元素的动画与特效。

2、实验内容与基本要求

（1）实验内容与要求：

根据提供任务需求设计开发Web应用程序，掌握动画与特效技术应用，对Web应用的重要意义；熟悉使用jQuery技术实现：隐藏与显示匹配元素、切换元素的可见性状态、实现淡入淡出的动画效果、实现滑动效果以及实现自定义东湖效果等。

（2）查阅jQuery的官方网站，查阅jQuery 官方文档，熟悉jQuery的使用。。

3.、主要仪器设备材料

（1）需要准备一台带有浏览器、能够访问因特网的计算机。

（2）相关的开发工具。

实验6  jQuery操作表单和表格（设计性）

1、实验目的

目的：依据要求，掌握jQuery事件处理机制。

任务：1、掌握对常用表单元素的操作与使用，包括：单行文本框、多行文本框、密码框、复选框、下拉列表框等。

2、掌握表单的验证技术，特别是使用正则表达式，对表单输入域的合法性进行验证。

3、掌握jQuery对表格的常用操作，包括：表格隔行变色、表格展开与关闭、表格内容的筛选等。

4、熟练使用jQuery技术，给表单元素绑定事件，并与服务器进行数据交互等。

2、实验内容与基本要求

（1）实验内容与要求：

根据提供任务需求设计开发Web应用程序，掌握HTML常用的表单元素及其使用；熟悉使用jQuery操作HTML表单元素等；熟练使用jQuery操作表格，包括：隔行变色，表格分类的展开与关闭、表格内容的筛选等；通过与传统方法的比较，明确jQuery在操作表单、表格方面的巨大优越性。

（2）查阅jQuery的官方网站，查阅jQuery 官方文档，熟悉jQuery的使用。。

3.、主要仪器设备材料

（1）需要准备一台带有浏览器、能够访问因特网的计算机。

（2）相关的开发工具。

实验7  Ajax在jQuery中的应用（综合型）

1、实验目的

目的：依据要求，掌握jQuery中Ajax技术的应用。

任务：1、掌握load方法的应用。

2、掌握get和post方法的应用。

3、掌握getScript和getJSON方法的应用。

4、掌握ajax方法的应用。

5、熟练使用serialize方法，序列化表单数据。

2、实验内容与基本要求

（1）实验内容与要求：

根据提供任务需求设计开发Web应用程序，掌握Ajax的基本原理，理解Ajax的优势与不足；熟悉使用jQuery的Ajax技术实现客户端与服务器的数据交互；通过比较使用传统的JavaScript的Ajax技术，以及不使用Ajax技术，对设计开发Web应用的重要影响。

（2）查阅jQuery的官方网站，查阅jQuery 官方文档，熟悉jQuery的使用。。

3.、主要仪器设备材料

（1）需要准备一台带有浏览器、能够访问因特网的计算机。

（2）相关的开发工具。

实验8  jQuery中常用插件及其应用（综合型）

1、实验目的

目的：依据要求，掌握jQuery的常用插件及其应用。

任务：1、掌握jQuery中12种常用插件的使用。

2、掌握能够根据Web应用需求，设计或开发自己的jQuery插件。

3、掌握能够根据Web应用需求，去搜索和查找满足要求的第三方插件。

4、熟悉jQuery的插件技术在Web应用设计中，带来的巨大便利与优势。

2、实验内容与基本要求

（1）实验内容与要求：

根据提供任务需求设计开发Web应用程序，掌握折叠面板、自动完成插件、按钮、日期选择器、对话框、菜单、进度条、滑块、旋转器、标签页和工具提示框等12中常用插件的应用；学会根据Web应用需求，设计开发jQuery插件或搜索查找第三方插件；理解并掌握jQuery的插件技术在Web应用设计中带来的优越性。

（2）查阅jQuery的官方网站，查阅jQuery 官方文档，熟悉jQuery的使用。。

3.、主要仪器设备材料

（1）需要准备一台带有浏览器、能够访问因特网的计算机。

（2）相关的开发工具。

四、习题与作业

五、课程考核形式与成绩评定

1、考试形式：考查。

2、考核成绩评定：采用百分制，总成绩由平时成绩（30%）+期末考查成绩（70%）。

第三部分  附  录

一、教学参考书

 [1]陶国荣著,《jQuery权威指南》(第1版),机械工业出版社, 2011年5月。

[2]查弗著，李松峰译，《jQuery基础教程》(第2版)，人民邮电出版社，2009年11月

[3]单东林，张晓菲著，《锋利的jQuery》（第2版），人民邮电出版社，2012年7月

[4]蔡艳桃著，《jQuery开发基础教程》（第1版），人民邮电出版社，2016年7月

二、建立课程网站

说明：①纯理论课程删除“第二部分本文”中的“课程实验”部分。并重新编标题号。

      ‚纯实验课程删除“第二部分本文”中的“基本内容与学时分配”部分。并重新编标题号。

      ƒ有实验的课程“三性”实验比例合格课程达30%以上、优质课程达50%以上、精品课程达70%以上。

      ④大纲审核人为教研（实验）室主任和一名具有副高以上职称的教师。

集中实践环节教学大纲

             《 X X X X》实  践  教  学  大  纲

课程代码：X X X                           开课学期：X X X 学年X X 学期

适用专业：X X X 专业                       学    时： X X X 周

编写教师：X X X                             学    分： X X X

审  核：X X X 、X X X

一、课程与技术、能力培养的关系、作用

    X X X (300字左右）

二、课程内容与基本要求

X X X (200字左右）

三、集中实践场所及相关设施要求

1、实践场所选择

X X X

2、设施要求

X X X

四、课程考核形式与成绩评定

五、教学参考书

   [1]X X X主编，《X X X》（第X 版》， X X X出版社， X X 年 X 月。

   [2]……

   ……

《jQuery开发基础/WebAPI》考 试 大 纲

课程代码：59010116                        学    时：72

适用对象：软件专业                         学    分：4.5

编写教师：彭春富 石红春                      审  核：

一、课程的性质和目的

jQuery是一个兼容多浏览器的JavaScript框架，核心理念是write less,do more(写的更少,做的更多)。如今，jQuery已经成为最流行的JavaScript框架，已经成为Web开发领域的事实标准，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手，极大地提高了他们的开发效率。而且jQuery是免费、开源的，jQuery的语法设计可以使开发者使用起来更加便捷，其模块化的使用方式可以使开发者很轻松的开发出功能强大的静态或动态网页，可以讲jQuery技术已经成为了目前Web开发的必备技术之一。

本课程内容主要包括JavaScript基本语法、jQuery选择器、jQuery事件、jQuery效果等，同时也包含了一些常见插件的使用等方面。

由于本课程会用到Web开发的一些基础知识，学习本门课程的学生至少要熟悉html、div+css、JavaScript、DOM等课程内容。

二、考试要求

考试类型：机试(考试、考查、机试）；  考试总分：100 分

考试方法：开卷(开卷、闭卷）；  考试时间：120 分钟

三、考核知识点

注：1、能力层次为“识记”、“理解”、“应用”、“综合”四个层次；

2、表格不够可自行扩充。

四、教学参考书

 [1]陶国荣著,《jQuery权威指南》(第1版),机械工业出版社, 2011年5月。

[2]查弗著，李松峰译，《jQuery基础教程》(第2版)，人民邮电出版社，2009年11月

[3]单东林，张晓菲著，《锋利的jQuery》（第2版），人民邮电出版社，2012年7月

[4]蔡艳桃著，《jQuery开发基础教程》（第1版），人民邮电出版社，2016年7月

  说明：大纲审核人为教研（实验）室主任和一名具有副高以上职称的教师。