《JQuery》課程教學(xué)大綱

1、JQuery課程教學(xué)大綱-javascript技術(shù)課程編碼：171210190課程性質(zhì)：專業(yè)方向課程（選修）適用專業(yè)：信息與計(jì)算科學(xué)、信息管理與信息系統(tǒng)學(xué)時(shí)學(xué)分： 32學(xué)時(shí) 學(xué)分所學(xué)先修課信息技術(shù)基礎(chǔ)、網(wǎng)頁(yè)制作編寫單位：數(shù)學(xué)與信息科學(xué)系一、課程說(shuō)明1、課程簡(jiǎn)介本課程是關(guān)于客戶端腳本javascript、jquery學(xué)習(xí)的實(shí)用技能課程。課程內(nèi)容主要包括javascript基本語(yǔ)法、jquery選擇器、jquery事件、jquery效果等，同時(shí)也包含了一些常見插件的使用等方面。 本課程要求學(xué)生熟練掌握jquery的使用，能夠手動(dòng)寫出jquery的一些常見特效，并學(xué)會(huì)插件的使用。2、教學(xué)目的要求 通

2、過(guò)理論和實(shí)踐相結(jié)合的教學(xué)方式，使學(xué)生熟練掌握jquery制作網(wǎng)頁(yè)特效的思想和方法。學(xué)會(huì)jquery的一些相關(guān)知識(shí)，尤其是選擇器及一些常用效果。在jquery的一些基礎(chǔ)知識(shí)之上，能夠進(jìn)行一些插件的使用或者對(duì)一些網(wǎng)上下載的一些jquery效果進(jìn)行修改。讓學(xué)生養(yǎng)成良好的編碼，學(xué)習(xí)并掌握網(wǎng)頁(yè)制作中jquery的使用，提高用戶體驗(yàn)。3、教學(xué)重點(diǎn)難點(diǎn)選擇器、操作網(wǎng)頁(yè)元素、方法、事件、插件4、考核方式 本課程為考查課，考試的形式上機(jī)考試，總分為100分。上機(jī)制作一個(gè)網(wǎng)站，在網(wǎng)站的網(wǎng)頁(yè)中恰當(dāng)應(yīng)用jquery技術(shù)。5、學(xué)時(shí)分配表 本課程共32學(xué)時(shí)，講授16學(xué)時(shí)，上機(jī)實(shí)踐16學(xué)時(shí)。表1 課程學(xué)時(shí)分配表章次教學(xué)內(nèi)容

3、講授課學(xué)時(shí)數(shù)試驗(yàn)(實(shí)踐)課學(xué)時(shí)數(shù)一第1章 認(rèn)識(shí)jQuery0.50.5二第2章 jQuery選擇器22三第3章 jQuery中的DOM操作22四第4章 jQuery中的事件和動(dòng)畫11五第5章 jQuery對(duì)表單、表格的操作及更多應(yīng)用22六第6章 jQuery與Ajax的應(yīng)用33七第7章 jQuery插件的使用和寫法22八第8章 用jQuery打造個(gè)性網(wǎng)站22九第9章 jQuery Mobile1.51.5總計(jì)1616教學(xué)內(nèi)容認(rèn)識(shí)jQuery（0.5學(xué)時(shí)）教學(xué)目標(biāo)掌握J(rèn)avascript的基本概念和基本語(yǔ)法（概念、變量定義、循環(huán)與分支），掌握網(wǎng)頁(yè)中Javascript和jquery的使用方法本章

4、重點(diǎn)網(wǎng)頁(yè)中引用jquery教學(xué)內(nèi)容1.1 JavaScript和JavaScript庫(kù)1.1.1 JavaScript簡(jiǎn)介1.1.2 JavaScript庫(kù)作用及對(duì)比1.2 加入jQuery1.2.1 jQuery簡(jiǎn)介1.2.2 jQuery的優(yōu)勢(shì)1.3 jQuery代碼的編寫1.3.1 配置jQuery環(huán)境1.3.2 編寫簡(jiǎn)單的jQuery代碼1.3.3 jQuery代碼風(fēng)格1.4 jQuery對(duì)象和DOM對(duì)象1.4.1 DOM對(duì)象和jQuery對(duì)象簡(jiǎn)介1.4.2 jQurey對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換1.4.3 實(shí)例研究1.5 解決jQuery和其他庫(kù)的沖突1.6 jQuery開發(fā)工具和插

5、件1.7 小結(jié)jQuery選擇器（2學(xué)時(shí)）教學(xué)目標(biāo)掌握jquery選擇器的使用方法，掌握結(jié)合選擇器使用jquery設(shè)置網(wǎng)頁(yè)元素的方法本章重點(diǎn)jquery選擇器教學(xué)內(nèi)容2.1 jQuery選擇器是什么2.2 jQuery選擇器的優(yōu)勢(shì)2.3 jQuery選擇器2.3.1 基本選擇器2.3.2 層次選擇器2.3.3 過(guò)濾選擇器2.3.4 表單選擇器2.4 應(yīng)用jQuery改寫示例2.5 選擇器中的一些注意事項(xiàng)2.5.1 選擇器中含有特殊符號(hào)的注意事項(xiàng)2.5.2 選擇器中含有空格的注意事項(xiàng)2.6 案例研究-某網(wǎng)站品牌列表的效果2.7 其他選擇器2.7.1 jQuery提供的選擇器的擴(kuò)展2.7.2 其他

6、使用CSS選擇器的方法2.8 小結(jié)jQuery中的DOM操作（2學(xué)時(shí)）教學(xué)目標(biāo)掌握網(wǎng)頁(yè)中元素節(jié)點(diǎn)遍歷的方法本章重點(diǎn)節(jié)點(diǎn)教學(xué)內(nèi)容3.1 DOM操作的分類3.2 jQuery中的DOM操作3.2.1 查找節(jié)點(diǎn)3.2.2 創(chuàng)建節(jié)點(diǎn)3.2.3 插入節(jié)點(diǎn)3.2.4 刪除節(jié)點(diǎn)3.2.5 復(fù)制節(jié)點(diǎn)3.2.6 替換節(jié)點(diǎn)3.2.7 包裹節(jié)點(diǎn)3.2.8 屬性操作3.2.9 樣式操作3.2.10 設(shè)置和獲取HTML、文本和值3.2.11 遍歷節(jié)點(diǎn)3.2.12 CSS-DOM操作3.3 案例研究-某網(wǎng)站的超鏈接和圖片提示效果3.4 小結(jié)jQuery中的事件和動(dòng)畫（1學(xué)時(shí)）教學(xué)目標(biāo)掌握jquery中事件綁定的方法，掌握

7、簡(jiǎn)單jquery動(dòng)畫的制作方法本章重點(diǎn)Jquery事件、簡(jiǎn)單動(dòng)畫教學(xué)內(nèi)容4.1 jQuery中的事件4.1.1 加載DOM4.1.2 事件綁定4.1.3 合成事件4.1.4 事件冒泡4.1.5 事件對(duì)象的屬性4.1.6 移除事件4.1.7 模擬操作4.1.8 其他用法4.2 jQuery中的動(dòng)畫4.2.1 show（）方法和hide（）方法4.2.2 fadeIn（）方法和fadeOut（）方法4.2.3 slideUp（）方法和slideDown（）方法4.2.4 自定義動(dòng)畫方法animate（）4.2.5 動(dòng)畫回調(diào)函數(shù)4.2.6 停止動(dòng)畫和判斷是否處于動(dòng)畫狀態(tài)4.2.7 其他動(dòng)畫方法4.2

8、.8 動(dòng)畫方法概括4.3 視頻展示效果實(shí)例4.4 小結(jié)jQuery對(duì)表單、表格的操作及更多應(yīng)用（2學(xué)時(shí)）教學(xué)目標(biāo)掌握利用第二章的選擇器設(shè)置表單、表格的屬性的方法本章重點(diǎn)設(shè)置元素屬性教學(xué)內(nèi)容5.1 表單應(yīng)用5.1.1 單行文本框應(yīng)用5.1.2 多行文本框應(yīng)用5.1.3 復(fù)選框應(yīng)用5.1.4 下拉框應(yīng)用5.1.5 表單驗(yàn)證5.2 表格應(yīng)用5.2.1 表格變色5.2.2 表格展開關(guān)閉5.2.3 表格內(nèi)容篩選5.3 其他應(yīng)用5.3.1 網(wǎng)頁(yè)字體大小5.3.2 網(wǎng)頁(yè)選項(xiàng)卡5.3.3 網(wǎng)頁(yè)換膚5.4 小結(jié)jQuery與Ajax的應(yīng)用（3學(xué)時(shí)）教學(xué)目標(biāo)掌握jquery使用ajax無(wú)刷新更新的方法本章重點(diǎn)Po

9、st、ajax方法教學(xué)內(nèi)容6.1 Ajax的優(yōu)勢(shì)和不足6.1.1 Ajax的優(yōu)勢(shì)6.1.2 Ajax的不足6.2 Ajax的XMLHttpRequest對(duì)象6.3 安裝Web環(huán)境-AppServ6.4 編寫第1個(gè)Ajax例子6.5 jQuery中的Ajax6.5.1 load（）方法6.5.2 $.get（）方法和$.post（）方法6.5.3 $.getScript（）方法和$.getJson（）方法6.5.4 $.ajax（）方法6.6 序列化元素6.7 jQuery中的Ajax全局事件6.8 基于jQuery的Ajax聊天室程序6.8.1 基本設(shè)想6.8.2 設(shè)計(jì)數(shù)據(jù)庫(kù)6.8.3 服務(wù)器

10、端處理6.8.4 客戶端處理6.8.5 客戶端代碼6.8.6 整合代碼6.9 小結(jié)jQuery插件的使用和寫法（2學(xué)時(shí)）教學(xué)目標(biāo)掌握jquery其它插件的使用方法本章重點(diǎn)Validation、Form教學(xué)內(nèi)容7.1 jQuery表單驗(yàn)證插件-Validation7.1.1 Validation簡(jiǎn)介7.1.2 下載地址7.1.3 快速上手7.1.4 不同的驗(yàn)證寫法7.1.5 驗(yàn)證信息7.1.6 自定義驗(yàn)證規(guī)則7.1.7 API7.2 jQuery表單插件-Form7.2.1 Form插件簡(jiǎn)介7.2.2 下載地址7.2.3 快速上手7.2.4 核心方法-ajaxForm（）和ajaxSubmit（

11、）7.2.5 ajaxForm（）方法和ajaxSubmit（）方法的參數(shù)7.2.6 表單提交之前驗(yàn)證表單7.2.7 API7.3 模態(tài)窗口插件-SimpleModal7.3.1 SimpleModal插件簡(jiǎn)介7.3.2 下載地址7.3.3 快速上手7.3.4 關(guān)閉模態(tài)窗口7.3.5 實(shí)際應(yīng)用7.3.6 API7.4 管理Cookie的插件-Cookie7.4.1 Cookie插件簡(jiǎn)介7.4.2 下載地址7.4.3 快速上手7.4.4 API7.5 jQuery UI插件7.5.1 jQuery UI簡(jiǎn)介7.5.2 下載地址7.5.3 快速上手7.5.4 與單擊事件沖突7.5.5 與后臺(tái)結(jié)合7

12、.6 編寫jQuery插件7.6.1 插件的種類7.6.2 插件的基本要點(diǎn)7.6.3 插件中的閉包7.6.4 jQuery插件的機(jī)制7.6.5 編寫jQuery插件7.7 小結(jié)用jQuery打造個(gè)性網(wǎng)站（2學(xué)時(shí)）教學(xué)目標(biāo)熟練使用jquery，制作網(wǎng)站本章重點(diǎn)教學(xué)內(nèi)容8.1 案例背景介紹8.2 網(wǎng)站材料8.3 網(wǎng)站結(jié)構(gòu)8.3.1 文件結(jié)構(gòu)8.3.2 網(wǎng)頁(yè)結(jié)構(gòu)8.3.3 界面設(shè)計(jì)8.4 網(wǎng)站的（X）HTML8.5 網(wǎng)站樣式（CSS）8.5.1 將CSS文件分門別類8.5.2 編寫CSS8.6 網(wǎng)站腳本（jQuery）8.6.1 準(zhǔn)備工作8.6.2 首頁(yè)（index.html）上的功能8.6.3 詳細(xì)頁(yè)（detail.html）上的功能8.7 小結(jié)jQuery Mobile（1.5學(xué)時(shí)）教學(xué)目標(biāo)了解jquery移動(dòng)設(shè)備開發(fā)技術(shù)本章重點(diǎn)jQuery Mobile教學(xué)內(nèi)容9.1 HTML 5簡(jiǎn)介9.2 jQuery Mobi