課程

學期

總學時

周

學

時

學

?

分

考核

方式

采用

教材

情況

教材名稱

瘋狂Ajax講義

主編（著）

李剛

出版社

名稱

中國工信出版社

48

6

6

考查

出版時間

2017.1

周

次

日

期

每周時

數分配

教學內容

備?注

?

講

授

實驗

(實踐)

合計時數

?

?

?

1

9.10-9.14

2

2

4

第一章：JQuery入門

?

?

2

9.17-9.21

2

2

4

第二章：JQuery高級API

2.1 熟悉Jquery的基本$符號含義

2.2熟悉HBuilder工具使用

2.3掌握$(function(){});

?

?

3

9.25-9.28

2

2

4

第三章：?層次選擇器和迭代選擇器

3.1基本選擇器

3.2熟悉層次選擇器

3.3掌握迭代選擇器

?

?

4

10.1-10.5

?

?

?

?

國慶

?

5

10.8-10.12

4

4

8

第四章：事件原理及其運用

4.1jQuery事件

4.2事件綁定

?

?

6

10.15-10.19

4

4

8

第五章：Ajax及動畫效果

5.1Ajax原理

5.2Ajax應用

5.3Ajax動畫

?

?

7

10.22-10.26

4

4

8

第六章：異步調用及插件使用

6.1異步調用案例

6.2插件使用

?

?

8

10.29-11.2

4

4

8

第七章：在線商城綜合案例一

7.1 在線商城案例剖徐

7.2 頁面框架講解

?

?

9

11.6-11.10

4

4

8

第八章：在線商城綜合案例二

8.1 jQuery函數在項目中的應用

82. jQuery事件、動畫等應用

?

?

課時內容

第1章 了解JQuery入門

計劃學時

4

教學目標

（1）熟悉Jquery框架開發環境的構建過程、開發環境的使用方法。

（2）熟悉Jquery框架基本運行流程和基本配置。

（3）掌握Action的開發和Result配置。

（4）理解攔截器的工作原理和意義，掌握攔截器的配置、自定義攔截的使用、了解系統默認攔截器。

（5）掌握Jquery?標簽庫的基本用法。

（6）了解Jquery?的類型轉換和對OGNL的支持。

（7）掌握Jquery?的驗證框架技術。

（8）了解Jquery?的國際化。

（9）掌握Jquery?的文件上傳和下載。

教學重點

t??HTML基礎。

t??MyEclipse 2012的工作界面組成。

t??創建站點和管理站點的操作。

教學難點

HTML常用標簽及其使用

如何正確規劃網站內容。

教學設計

教學內容

課程導入：通過與學生問題式交流，引入該門課程。

介紹該課程的授課基本情況。

欣賞“貴美商城”、“e客在線”等網站作品，引入本章網頁設計概述的學習主要知識。

討論問題：1、為什么要首先建立站點？

??????????2、一個網站最基本的功能有哪些？

二、J2EE基礎（重點、難點）

http://www.w3school.com.cn/html/

N"

<標記>受標記影響的內容<標記>

【案例】標記屬性說明。

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE configuration

PUBLIC "-//mybatis.org//DTD Config 3.0//E>

<configuration>

<!-- 加載屬性文件 -->

<properties resource="config/db.properties">

<!--properties中還可以配置一些屬性名和屬性值 ?-->

<!-- <property name="jdbc.driver" value=""/> -->

</properties>

<settings>

<!--開啟延遲加載-->

<setting name="lazyLoadingEnabled" value="true"/>

<!--按需延遲加載-->

<setting name="aggressiveLazyLoading" value="false"/>

<!-- 開啟二級緩存 -->

<setting name="cacheEnabled" value="true"/>

</settings>

<typeAliases>

<package name="com.neuedu.pojo"/>

</typeAliases>

<mappers>

<package name="com.neuedu.mapper"/>

</mappers>

</configuration> ?七、實訓——創建“快樂旅游”站點

本實訓的目標是為“人事系統”網站創建站點，包括站點中的各種文件和文件夾。要求首先規劃站點結構，然后創建站點以及其中的文件對象。

“貴美商城”站點除了應該具備商城的普遍特點之外，還應該突出“高效”一詞，這需要通過有效地設計和整合色彩、布局以及簡單輕松的文字等方面，才能達到效果。

?

拓展知識

????????????????

課堂案例1——創建站點 ?????????????課堂案例2——管理站點 ???????上機實訓——創建“貴美商城”站點

小結

上完課以后在寫

思考及作業

想一想：

站點的作用是什么？站點有何意義？舉例日常瀏覽網頁時遇到的站點，并分析其分為幾大板塊？

練一練：

（1）查看HBuilder中“表單”插入欄包含的內容。

（2）在浮動面板組中將“資源”、“行為”和“組件”3個面板排列到同一個面板中（首先需要利用“窗口”菜單顯示出這些面板）。

（3）創建名為“wodewangzhan”的站點，將位置設置在D盤的“OK”文件夾中，然后通過編輯站點的方法將其重命名為“mynet”，最后刪除站點并取消操作。

（4）規劃并構思一個美食站點，創建一個導航草圖，其中必須包含“菜譜”和“食材”兩大板塊，要求整個站點結構能滿足一般的瀏覽和查詢美食資源的要求。

（5）在上一題的基礎上，啟動MyEclipse 2012，創建該美食站點并在其中添加相應的文件夾和文件。

教學后記

?

?

?

?

?

課時內容

第2章 JQuery高級API

計劃學時

4

教學目標

（1）熟悉Jquery的基本$符號含義。

（2）熟悉HBuilder工具使用

（3）掌握$(function(){});

（4）理解攔截器的工作原理和意義，掌握攔截器的配置、自定義攔截的使用、了解系統默認攔截器。

教學重點

t?$(function(){});

教學難點

常規API使用

教學設計

1、JQuery 事件處理方法是 jQuery 中的核心函數。?
2、事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”（或“激發”）經常會被使用。?
3、通常會把 jQuery 代碼放到 部分的事件處理方法中：

教學內容

課程導入：通過與學生問題式交流，引入該門課程。

二、J2EE基礎（重點、難點）

http://www.w3school.com.cn/html/

N"

由于 jQuery 是為處理 HTML 事件而特別設計的，那么當您遵循以下原則時，您的代碼會更恰當且更易維護：?
1、把所有 jQuery 代碼置于事件處理函數中?
2、把所有事件處理函數置于文檔就緒事件處理器中?
3、把 jQuery 代碼置于單獨的 .js 文件中?
4、如果存在名稱沖突，則重命名 jQuery 庫拓展知識

????????????????

課堂案例1——計算器????????????????????????????????????上機實訓——創建“個人計算器?”

小結

上完課以后在寫

思考及作業

想一想：

直到現在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。不過，有一種名為鏈接（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條。練一練：

（1）查看HBuilder中“表單”插入欄包含的內容。

（2）在浮動面板組中將“資源”、“行為”和“組件”3個面板排列到同一個面板中（首先需要利用“窗口”菜單顯示出這些面板）。

（3）創建名為“wodewangzhan”的站點，將位置設置在D盤的“OK”文件夾中，然后通過編輯站點的方法將其重命名為“mynet”，最后刪除站點并取消操作。

（4）規劃并構思一個美食站點，創建一個導航草圖，其中必須包含“菜譜”和“食材”兩大板塊，要求整個站點結構能滿足一般的瀏覽和查詢美食資源的要求。

（5）在上一題的基礎上，啟動MyEclipse 2012，創建該美食站點并在其中添加相應的文件夾和文件。

教學后記

?

?

?

?

?

課時內容

第3章 層次選擇器和迭代選擇器

計劃學時

4

教學目標

（1）基本選擇器

（2）熟悉層次選擇器

（3）掌握迭代選擇器

教學重點

t??迭代選擇器。

????層次選擇器

教學難點

迭代選擇器如何使用

教學設計

?

教學內容

課程導入：通過與學生問題式交流，引入該門課程。

介紹該課程的授課基本情況。

欣賞“貴美商城”、“e客在線”等網站作品，引入本章網頁設計概述的學習主要知識。

討論問題：1、簡化方案是什么？??????????

參考代碼：

• <!DOCTYPE html>?<html>?<head>?<script?src="/jquery/jquery-1.11.1.min.js">?</script>?<script>?$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script>?</head>?<body>?<p>如果您點擊我，我會消失。</p>?<p>點擊我，我會消失。</p>?<p>也要點擊我哦。</p>?</body>?</html>

<!DOCTYPE html><html><head><script?src="/jquery/jquery-1.11.1.min.js"></script><script?type="text/javascript">

$(document).ready(function(){

??$(".ex .hide").click(function(){

????$(this).parents(".ex").hide("slow");

??});

});</script><style?type="text/css">?div.ex{background-color:#e5eecc;padding:7px;border:solid 1px #c3c3c3;}</style></head>

<body>

<h3>中國辦事處</h3><div?class="ex"><button?class="hide"?type="button">隱藏</button><p>聯系人：張先生<br?/>?

北三環中路 100 號<br?/>

北京</p></div>

<h3>美國辦事處</h3><div?class="ex"><button?class="hide"?type="button">隱藏</button><p>聯系人：David<br?/>?

第五大街 200 號<br?/>

紐約</p></div>/body></html>

8、jQuery animate()?
演示簡單的 jQuery animate() 函數。

<!DOCTYPE html><html><head><script?src="/jquery/jquery-1.11.1.min.js"></script><script>?

$(document).ready(function(){

??$("button").click(function(){

????var?div=$("div");

????div.animate({height:'300px',opacity:'0.4'},"slow");

????div.animate({width:'300px',opacity:'0.8'},"slow");

????div.animate({height:'100px',opacity:'0.4'},"slow");

????div.animate({width:'100px',opacity:'0.8'},"slow");

??});

});</script>?</head>

<body>

<button>開始動畫</button><p>默認情況下，所有 HTML 元素的位置都是靜態的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p><div?style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body></html>

• ?

?

?

小結

?

思考及作業

想一想：

?

?

?

?

?

?

練一練：

教學后記

?

?

?

?

?

課時內容

第4章 事件原理及其使用

計劃學時

4

教學目標

?

4.1jQuery事件

4.2事件綁定

教學重點

t?

?

教學難點

?

教學設計

?

教學內容

課程導入：通過與學生問題式交流，引入該門課程。

介紹該課程的授課基本情況。

?

?

?

?

?

?

?

?

?

?

小結

上完課以后在寫

思考及作業

想一想：

?

?

?

?

?

?

練一練：

?

教學后記

?

?

?

?

?

課時內容

第五章：Ajax及動畫效果

計劃學時

8

教學目標

5.1Ajax原理

5.2Ajax應用

5.3Ajax動畫

教學重點

?

教學難點

?

教學設計

教學內容

課程導入：通過與學生問題式交流，引入該門課程。

介紹該課程的授課基本情況。

欣賞“貴美商城”、“e客在線”等網站作品，引入本章網頁設計概述的學習主要知識。

討論問題：

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

小結

上完課以后在寫

思考及作業

想一想：

?

?

?

練一練：

教學后記

?

?

?

?

?

課時內容

第六章：異步調用及插件使用

計劃學時

8

教學目標

6.1異步調用案例

6.2插件使用

教學重點

t?

教學難點

?

教學設計

?

?

?

?

?

?

?

?

?

?

?

教學內容

課程導入：通過與學生問題式交流，引入該門課程。

介紹該課程的授課基本情況。

?

討論問題：1

?

小結

上完課以后在寫

思考及作業

想一想：

?

?

?

?

?

練一練：

?

教學后記

?

?

?

?

?

課時內容

第6章 在線商城綜合實訓一

計劃學時

8

教學目標

7.1 在線商城案例剖徐

7.2 頁面框架講解

教學重點

t?

教學難點

?

教學設計

?

?

?

?

?

?

?

?

?

?

?

教學內容

課程導入：通過與學生問題式交流，引入該門課程。

介紹該課程的授課基本情況。

?

討論問題：1

?

小結

上完課以后在寫

思考及作業

想一想：

?

?

?

?

?

練一練：

?

教學后記

?

?

?

?

?

課時內容

第八章：在線商城綜合案例二

計劃學時

8

教學目標

8.1 jQuery函數在項目中的應用

82. jQuery事件、動畫等應用

教學重點

t?

教學難點

?

教學設計

?

?

?

?

?

?

?

?

?

?

?

教學內容

課程導入：通過與學生問題式交流，引入該門課程。

介紹該課程的授課基本情況。

?

討論問題：1

?

小結

上完課以后在寫

思考及作業

想一想：

?

?

?

?

?

練一練：

?

教學后記

?

?

?

?

?