課程

學(xué)期

總學(xué)時(shí)

周

學(xué)

時(shí)

學(xué)

?

分

考核

方式

采用

教材

情況

教材名稱

瘋狂Ajax講義

主編（著）

李剛

出版社

名稱

中國工信出版社

48

6

6

考查

出版時(shí)間

2017.1

周

次

日

期

每周時(shí)

數(shù)分配

教學(xué)內(nèi)容

備?注

?

講

授

實(shí)驗(yàn)

(實(shí)踐)

合計(jì)時(shí)數(shù)

?

?

?

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

第四章：事件原理及其運(yùn)用

4.1jQuery事件

4.2事件綁定

?

?

6

10.15-10.19

4

4

8

第五章：Ajax及動(dòng)畫效果

5.1Ajax原理

5.2Ajax應(yīng)用

5.3Ajax動(dòng)畫

?

?

7

10.22-10.26

4

4

8

第六章：異步調(diào)用及插件使用

6.1異步調(diào)用案例

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函數(shù)在項(xiàng)目中的應(yīng)用

82. jQuery事件、動(dòng)畫等應(yīng)用

?

?

課時(shí)內(nèi)容

第1章 了解JQuery入門

計(jì)劃學(xué)時(shí)

4

教學(xué)目標(biāo)

（1）熟悉Jquery框架開發(fā)環(huán)境的構(gòu)建過程、開發(fā)環(huán)境的使用方法。

（2）熟悉Jquery框架基本運(yùn)行流程和基本配置。

（3）掌握Action的開發(fā)和Result配置。

（4）理解攔截器的工作原理和意義，掌握攔截器的配置、自定義攔截的使用、了解系統(tǒng)默認(rèn)攔截器。

（5）掌握J(rèn)query?標(biāo)簽庫的基本用法。

（6）了解Jquery?的類型轉(zhuǎn)換和對OGNL的支持。

（7）掌握J(rèn)query?的驗(yàn)證框架技術(shù)。

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

（9）掌握J(rèn)query?的文件上傳和下載。

教學(xué)重點(diǎn)

t??HTML基礎(chǔ)。

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

t??創(chuàng)建站點(diǎn)和管理站點(diǎn)的操作。

教學(xué)難點(diǎn)

HTML常用標(biāo)簽及其使用

如何正確規(guī)劃網(wǎng)站內(nèi)容。

教學(xué)設(shè)計(jì)

教學(xué)內(nèi)容

課程導(dǎo)入：通過與學(xué)生問題式交流，引入該門課程。

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

欣賞“貴美商城”、“e客在線”等網(wǎng)站作品，引入本章網(wǎng)頁設(shè)計(jì)概述的學(xué)習(xí)主要知識。

討論問題：1、為什么要首先建立站點(diǎn)？

??????????2、一個(gè)網(wǎng)站最基本的功能有哪些？

二、J2EE基礎(chǔ)（重點(diǎn)、難點(diǎn)）

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

N"

<標(biāo)記>受標(biāo)記影響的內(nèi)容<標(biāo)記>

【案例】標(biāo)記屬性說明。

<?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> ?七、實(shí)訓(xùn)——?jiǎng)?chuàng)建“快樂旅游”站點(diǎn)

本實(shí)訓(xùn)的目標(biāo)是為“人事系統(tǒng)”網(wǎng)站創(chuàng)建站點(diǎn)，包括站點(diǎn)中的各種文件和文件夾。要求首先規(guī)劃站點(diǎn)結(jié)構(gòu)，然后創(chuàng)建站點(diǎn)以及其中的文件對象。

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

?

拓展知識

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

課堂案例1——?jiǎng)?chuàng)建站點(diǎn) ?????????????課堂案例2——管理站點(diǎn) ???????上機(jī)實(shí)訓(xùn)——?jiǎng)?chuàng)建“貴美商城”站點(diǎn)

小結(jié)

上完課以后在寫

思考及作業(yè)

想一想：

站點(diǎn)的作用是什么？站點(diǎn)有何意義？舉例日常瀏覽網(wǎng)頁時(shí)遇到的站點(diǎn)，并分析其分為幾大板塊？

練一練：

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

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

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

（4）規(guī)劃并構(gòu)思一個(gè)美食站點(diǎn)，創(chuàng)建一個(gè)導(dǎo)航草圖，其中必須包含“菜譜”和“食材”兩大板塊，要求整個(gè)站點(diǎn)結(jié)構(gòu)能滿足一般的瀏覽和查詢美食資源的要求。

（5）在上一題的基礎(chǔ)上，啟動(dòng)MyEclipse 2012，創(chuàng)建該美食站點(diǎn)并在其中添加相應(yīng)的文件夾和文件。

教學(xué)后記

?

?

?

?

?

課時(shí)內(nèi)容

第2章 JQuery高級API

計(jì)劃學(xué)時(shí)

4

教學(xué)目標(biāo)

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

（2）熟悉HBuilder工具使用

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

（4）理解攔截器的工作原理和意義，掌握攔截器的配置、自定義攔截的使用、了解系統(tǒng)默認(rèn)攔截器。

教學(xué)重點(diǎn)

t?$(function(){});

教學(xué)難點(diǎn)

常規(guī)API使用

教學(xué)設(shè)計(jì)

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

教學(xué)內(nèi)容

課程導(dǎo)入：通過與學(xué)生問題式交流，引入該門課程。

二、J2EE基礎(chǔ)（重點(diǎn)、難點(diǎn)）

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

N"

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

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

課堂案例1——計(jì)算器????????????????????????????????????上機(jī)實(shí)訓(xùn)——?jiǎng)?chuàng)建“個(gè)人計(jì)算器?”

小結(jié)

上完課以后在寫

思考及作業(yè)

想一想：

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

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

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

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

（4）規(guī)劃并構(gòu)思一個(gè)美食站點(diǎn)，創(chuàng)建一個(gè)導(dǎo)航草圖，其中必須包含“菜譜”和“食材”兩大板塊，要求整個(gè)站點(diǎn)結(jié)構(gòu)能滿足一般的瀏覽和查詢美食資源的要求。

（5）在上一題的基礎(chǔ)上，啟動(dòng)MyEclipse 2012，創(chuàng)建該美食站點(diǎn)并在其中添加相應(yīng)的文件夾和文件。

教學(xué)后記

?

?

?

?

?

課時(shí)內(nèi)容

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

計(jì)劃學(xué)時(shí)

4

教學(xué)目標(biāo)

（1）基本選擇器

（2）熟悉層次選擇器

（3）掌握迭代選擇器

教學(xué)重點(diǎn)

t??迭代選擇器。

????層次選擇器

教學(xué)難點(diǎn)

迭代選擇器如何使用

教學(xué)設(shè)計(jì)

?

教學(xué)內(nèi)容

課程導(dǎo)入：通過與學(xué)生問題式交流，引入該門課程。

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

欣賞“貴美商城”、“e客在線”等網(wǎng)站作品，引入本章網(wǎng)頁設(shè)計(jì)概述的學(xué)習(xí)主要知識。

討論問題：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>如果您點(diǎn)擊我，我會消失。</p>?<p>點(diǎn)擊我，我會消失。</p>?<p>也要點(diǎn)擊我哦。</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>聯(lián)系人：張先生<br?/>?

北三環(huán)中路 100 號<br?/>

北京</p></div>

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

第五大街 200 號<br?/>

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

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

<!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>開始動(dòng)畫</button><p>默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動(dòng)。如需對位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p><div?style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body></html>

• ?

?

?

小結(jié)

?

思考及作業(yè)

想一想：

?

?

?

?

?

?

練一練：

教學(xué)后記

?

?

?

?

?

課時(shí)內(nèi)容

第4章 事件原理及其使用

計(jì)劃學(xué)時(shí)

4

教學(xué)目標(biāo)

?

4.1jQuery事件

4.2事件綁定

教學(xué)重點(diǎn)

t?

?

教學(xué)難點(diǎn)

?

教學(xué)設(shè)計(jì)

?

教學(xué)內(nèi)容

課程導(dǎo)入：通過與學(xué)生問題式交流，引入該門課程。

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

?

?

?

?

?

?

?

?

?

?

小結(jié)

上完課以后在寫

思考及作業(yè)

想一想：

?

?

?

?

?

?

練一練：

?

教學(xué)后記

?

?

?

?

?

課時(shí)內(nèi)容

第五章：Ajax及動(dòng)畫效果

計(jì)劃學(xué)時(shí)

8

教學(xué)目標(biāo)

5.1Ajax原理

5.2Ajax應(yīng)用

5.3Ajax動(dòng)畫

教學(xué)重點(diǎn)

?

教學(xué)難點(diǎn)

?

教學(xué)設(shè)計(jì)

教學(xué)內(nèi)容

課程導(dǎo)入：通過與學(xué)生問題式交流，引入該門課程。

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

欣賞“貴美商城”、“e客在線”等網(wǎng)站作品，引入本章網(wǎng)頁設(shè)計(jì)概述的學(xué)習(xí)主要知識。

討論問題：

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

小結(jié)

上完課以后在寫

思考及作業(yè)

想一想：

?

?

?

練一練：

教學(xué)后記

?

?

?

?

?

課時(shí)內(nèi)容

第六章：異步調(diào)用及插件使用

計(jì)劃學(xué)時(shí)

8

教學(xué)目標(biāo)

6.1異步調(diào)用案例

6.2插件使用

教學(xué)重點(diǎn)

t?

教學(xué)難點(diǎn)

?

教學(xué)設(shè)計(jì)

?

?

?

?

?

?

?

?

?

?

?

教學(xué)內(nèi)容

課程導(dǎo)入：通過與學(xué)生問題式交流，引入該門課程。

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

?

討論問題：1

?

小結(jié)

上完課以后在寫

思考及作業(yè)

想一想：

?

?

?

?

?

練一練：

?

教學(xué)后記

?

?

?

?

?

課時(shí)內(nèi)容

第6章 在線商城綜合實(shí)訓(xùn)一

計(jì)劃學(xué)時(shí)

8

教學(xué)目標(biāo)

7.1 在線商城案例剖徐

7.2 頁面框架講解

教學(xué)重點(diǎn)

t?

教學(xué)難點(diǎn)

?

教學(xué)設(shè)計(jì)

?

?

?

?

?

?

?

?

?

?

?

教學(xué)內(nèi)容

課程導(dǎo)入：通過與學(xué)生問題式交流，引入該門課程。

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

?

討論問題：1

?

小結(jié)

上完課以后在寫

思考及作業(yè)

想一想：

?

?

?

?

?

練一練：

?

教學(xué)后記

?

?

?

?

?

課時(shí)內(nèi)容

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

計(jì)劃學(xué)時(shí)

8

教學(xué)目標(biāo)

8.1 jQuery函數(shù)在項(xiàng)目中的應(yīng)用

82. jQuery事件、動(dòng)畫等應(yīng)用

教學(xué)重點(diǎn)

t?

教學(xué)難點(diǎn)

?

教學(xué)設(shè)計(jì)

?

?

?

?

?

?

?

?

?

?

?

教學(xué)內(nèi)容

課程導(dǎo)入：通過與學(xué)生問題式交流，引入該門課程。

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

?

討論問題：1

?

小結(jié)

上完課以后在寫

思考及作業(yè)

想一想：

?

?

?

?

?

練一練：

?

教學(xué)后記

?

?

?

?

?