jQuery程序设计教学探讨

卢守东 胡小春 高荣 徐辉

摘要：《jQuery程序设计》是一门具有较强综合性与实践性的课程，教学难度较大。文章主要结合具体的教学实践，探讨该课程的教学策略，包括整合内容、实例讲解、案例分析、强化实验、混合式教学与合理化考核，以提高其教学效果。

关键词： jQuery;程序设计;教学探讨;Web前端;Web应用

中图分类号：G642        文献标识码：A

文章编号：1009-3044（2022）10-0148-02

1 引言

jQuery是一个快速、小巧、简洁且功能丰富JavaScript库，也是目前Web前端开发的热门技术之一，其实际应用亦十分广泛[1]。为满足社会的实际需求，并提高学生的专业技能与就业能力，多数高校的计算机、电子商务以及其他相关专业均开设了《jQuery程序设计》或类似的jQuery课程，其目的主要就是让学生掌握基于jQuery的Web应用的前端设计技术，从而为日后的工作特别是动态网站的设计与开发工作奠定良好的基础。

作为一门课程，《jQuery程序设计》内容丰富，应用灵活，知识点多，涉及面广，包括HTML、Ajax、Apache、PHP、jQuery及jQuery插件（含jQuery EasyUI） 等，具有较强的综合性与实践性，因此教学难度较大，教学效果往往也难尽人意。在此，将结合具体的教学实践，探讨该门课程的教学策略，供大家参考。

2 教学策略

2.1 整合内容

以应用为导向，以实用为原则，以能力提升为目标，按照由浅入深、循序渐进的原则，合理整合jQuery程序设计课程的教学内容，将其分为jQuery概述、jQuery选择器、jQuery元素操作、jQuery事件处理、jQuery表单操作、jQuery Ajax应用、jQuery插件与jQuery应用案例8个专题。

2.2 实例讲解

在教学过程中，依托典型实例讲解各个知识点或技能点， 以便于学生理解jQuery的各种应用技术。例如，在第一次课jQuery概述专题中，通过在打开页面时自动显示一个“Hello，World！”对话框的实例，说明测试jQuery正常与否的基本方法，以及jQuery程序的基本格式。又如，选择器是jQuery十分重要的应用基础，种类繁多，易于混淆。不过，借助于一系列精心设计的既具体又相关的应用实例，再通过适当的演示与讲解，即可让学生尽快掌握各种基本选择器、层次选择器、表单选择器与过滤选择器的基本用法，并掌握相互之间的区别。

2.3 案例分析

在课程的最后一个专题jQuery应用案例中，采用案例教学法[2]，结合一个完整的具体案例进行深入分析、演示讲解，让学生了解jQuery各种技术的综合应用，达到融会贯通的目的。当然，所选案例应尽量兼顾此前各个专题的教学内容，且不宜过于复杂，以便于学生的理解与掌握。例如，以图片类网站“网上图库”的主页为案例，先明确其总体的设计要求，即简洁美观、主题鲜明、导航清晰、操作简便，能动态展示站点内当前的热门图片与推荐图片，以提高网站的吸引力。然后完成其布局设计，将页面大致分为导航菜单（含网站logo图片） 、图片轮播、图片展示与页脚信息四个区域与一个浮动窗口。接着，搭建相应的开发环境（包括用于支持PHP的XAMPP的安装与配置） ，并逐一实现主页中各个区域与浮动窗口的功能与效果。在此案例中，为确保网站首页具有良好的可扩展性与可维护性，遵循了模块化设计的思想与原则[1]，这对于学生日后具体应用的设计与实现是极具指导作用的。

2.4 强化实验

“实践出真知”，在教学过程中要切实加强实验环节，让学生通过具体实验理解并掌握有关应用技术，逐步提高其应用技能，从而达到学以致用的目标。在本课程中，与教学的专题内容相对应，共安排了8个同步实验，包括jQuery程序的设计、jQuery选择器的使用、jQuery的元素操作、jQuery的事件处理、jQuery的表单操作、jQuery的Ajax应用、jQuery插件的使用与网站首页的设计，并采用任务驱动法加以实施[3]。为确保实验效果，同时培养学生的团队精神与协作意识，允许学生自由组合，以小组方式协同完成实验任务（每个小组最多不超过3人，在第一次实验时确定，此后不再调整） 。完成实验后，还要按规范撰写实验报告，并及时提交。教师方面，则要认真做好各个实验的指导、检查与讲评工作，以进一步巩固实验效果。

2.5 混合式教学

线上线下混合式教学是一种行之有效的教学模式[4]，可通过教学平台与线上课程有效地拓展教学的时间与空间，从而提升课程的教学效果。

本文以中国大学MOOC平台为依托，在引用源课程部分教学视频的基础上，根据教学目标自行添加了相应的教学内容，从而成功构建了一门异步SPOC课程《jQuery及jQuery EasyUI》（https：//www.icourse163.org/spoc/course/GXCJ-1451655212） 。为便于教学的组织与实施，并遵循循序渐进、有效教学的基本原则，该课程将教学内容合理地划分为四个部分（即第一部分的jQuery入门篇、第二部分的jQuery提高篇、第三部分的jQuery进阶篇与第四部分的jQuery插件篇） ，每个部分又包含若干个教学单元、作业与测验，而每个教学单元又包含一系列相應的教学视频、讨论主题与实验文档。此外，课程最后还安排有期末考试（包括客观题与主观题两个部分） 。

在具体教学过程中，线上课程各部分的教学内容以及相关的学习任务均按照线下授课计划在适当的时间提前发布，并以公告的形式告知学生，以便提醒学生及时观看有关的教学视频，并在讨论区中对课程中的各个讨论主题进行自由讨论，同时认真完成其他有关的学习任务，如作业、测验、考试等。

此外，在具体的教学过程中，还要注重学习任务与教学活动的设计与实施。对于每次课的备课工作，均借助中国大学MOOC平台所提供的慕课堂提前完成，包括公告的创建、练习及练习库的创建等。而在每次课的授课过程中，则通过在慕课堂内适时发布公告、簽到、练习等，积极开展课堂活动，以明确教学目标与任务，并督促学生认真学习、加强交流。

基于MOOC平台的异步SPOC课程可全程记录和跟踪教师的教学过程与学生的学习过程，有利于实现线上教学与线下教学的有机融合，并促进学生的自主性学习与过程性学习。

2.6 合理化考核

为有效促进学生的自主学习，引导学生注重学习的过程与效果，课程的考核坚持过程性评价与终结性评价相结合的基本原则。在异步SPOC课程《jQuery及jQuery EasyUI》的首次应用中，考虑到教学的实际情况，课程的考核方案为：期评成绩=平时成绩×30%+期考成绩×70%=（线上平时成绩×20%+线下平时成绩×80%）×30%+期考成绩×70%。其中，学生的线上平时成绩根据学生线上的单元作业、单元测验、课程讨论与期末考试情况等按统一设定的标准与比例由教学平台自动进行计算，学生的线下平时成绩根据学生线下的考勤记录、实验情况等综合评定。至于期考，则以开卷考试的形式进行，题型主要为简答题、分析题、操作题、程序填空题与程序设计题，以重点考核学生的jQuery分析与应用能力。

3 结束语

《jQuery程序设计》是一门讲究理解、注重应用的课程，在教学过程中，应注意采取正确的教学策略，并根据实际情况进行相应的调整，以进一步提高其教学效果，并顺利达成其教学目标。

参考文献：

[1] 卢守东.jQuery程序设计实例教程[M].北京：清华大学出版社，2021.

[2] 郑淑芬.案例教学法的作用、实施环节及需要注意的问题[J].教育探索，2008（4）：56-57.

[3] 冯林，郑薇薇.“任务驱动”与“项目驱动”相结合的创新教育研究[J].黑龙江教育（高教研究与评估），2010（4）：57-59.

[4] 刘国芳，邓亚莉.“金课”背景下线上线下混合教学模式研究——以《Web前端设计与开发》课程为例[J].电脑知识与技术，2021，17（1）：111-112.

【通联编辑：王力】

收稿日期：2021-06-10

基金项目：广西财经学院教育教学改革工程项目（2021JG04） ;广西高等教育本科教学改革工程项目（2020JGB344）

作者简介：卢守东（1969—） ，男，广西岑溪人，高级工程师，主要研究方向为数据挖掘、图像加密、Web服务与云计算等;胡小春（1974—） ，男，广西桂林人，副教授，主要研究方向为区块链、数据分析、计算机应用教学;高荣（1979—） ，男，山东潍坊人，讲师，主要研究方向为数据挖掘、人工智能;徐辉（1965—） ，男，广西博白人，副教授，主要研究方向为机器学习、数据挖掘。