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—） ，男，廣西博白人，副教授，主要研究方向為機器學習、數據挖掘。