JQuery+Aja教案課程設(shè)計(jì)

課程教案

課題名稱JQuery+Ajxa應(yīng)用開發(fā)

授課班級(jí)授課學(xué)時(shí)2

授課地點(diǎn)授課形式講授

參考教材《jQuery和Ajax實(shí)戰(zhàn)教程》

教學(xué)資源

https://www.runoob.com/一菜鳥教程

知識(shí)目標(biāo)：

1、理解Jqueiry的本質(zhì)及宗旨。

2、熟悉Jquery的編碼風(fēng)格。

3、使用Jquery實(shí)現(xiàn)簡(jiǎn)單的顯示隱藏網(wǎng)頁(yè)元素效果。

技能目標(biāo)：

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

1、熟練掌握J(rèn)query頁(yè)面加載事件

2、熟悉Jquery的編碼風(fēng)格。

3、使用Jquery實(shí)現(xiàn)簡(jiǎn)單的顯示隱藏網(wǎng)頁(yè)元素效果。

素質(zhì)目標(biāo)：

學(xué)生可以基本熟悉Jquery開發(fā)環(huán)境，編寫第一個(gè)Jquery程序。

教學(xué)

熟練掌握J(rèn)query頁(yè)面加載事件，熟悉Jquery編碼風(fēng)格

重點(diǎn)

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

教學(xué)

點(diǎn)Jquery實(shí)現(xiàn)網(wǎng)頁(yè)元素的顯示隱藏效果。

難點(diǎn)

本次藍(lán)艮程為Jquery課程的第一個(gè)課，需要給學(xué)生揭開Jquery神秘的面

紗，11:學(xué)生知道Jquery就是一個(gè)JS庫(kù)，理解使用Jquery的作用，熟悉

學(xué)情分析

Jquery的編碼風(fēng)格，主要需要讓學(xué)生體會(huì)到Jquery相對(duì)原生JS比較，

可以彳5寫更少的代碼完成功能。

課前：

準(zhǔn)備有關(guān)Jquery相關(guān)的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對(duì)

Jquery產(chǎn)生興趣。

課中：

1、理解Jquery的本質(zhì)及宗旨。

教學(xué)過程

2、熟悉Jquery的編碼風(fēng)格。

3、使用Jquery實(shí)現(xiàn)簡(jiǎn)單的顯示隱藏網(wǎng)頁(yè)元素效果。

課后：

布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章，讓學(xué)生學(xué)習(xí)Jquery中的選擇器和篩選器有

哪些。

本次課程為第一次課，主要起到的作用是引導(dǎo)作用，讓學(xué)生真正體會(huì)到

Jquery的魅力即可，不需要太多復(fù)雜的案例，要讓學(xué)生對(duì)后面的Jquery

教學(xué)反思

學(xué)習(xí)充滿興趣即可，課程案例需要簡(jiǎn)單，讓學(xué)生用最少的代碼完成實(shí)際

功能，增強(qiáng)學(xué)生的成就感和求知欲。

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

課程名稱使用Jquery優(yōu)化Web頁(yè)面授課對(duì)象

第1章Jquery框架簡(jiǎn)介

本次課學(xué)

授課章節(jié)第1-3節(jié)Jquery簡(jiǎn)介，Jquery第一個(gè)程2學(xué)時(shí)

時(shí)數(shù)

序，Jqueiry實(shí)現(xiàn)顯示隱藏元素。

1、理解Jquery的本質(zhì)及宗旨。

教學(xué)目的2、熟悉Jquery的編碼風(fēng)格。

3、使用Jquery實(shí)現(xiàn)簡(jiǎn)單的顯示隱藏網(wǎng)頁(yè)元素效果。

本次課程為Jquery課程的第一個(gè)課,需要給學(xué)生揭開Jquery神秘的面紗，

讓學(xué)生知道Jquery就是一個(gè)JS庫(kù)，理解使用Jquery的作用，熟悉Jquery的

教學(xué)分析

編碼風(fēng)格，主要需要讓學(xué)生體會(huì)到Jquery相對(duì)原生JS比較，可以書寫更少的

代碼完成功能。

教學(xué)重點(diǎn)重點(diǎn)熟練掌握J(rèn)query頁(yè)面加載事件，熟悉Jquery編碼風(fēng)格

與

難點(diǎn)難點(diǎn)Jquery實(shí)現(xiàn)網(wǎng)頁(yè)元素的顯示隱藏效果。

教學(xué)方法?課堂講授?講解例題?電子課件。案例分析。小組討論

與手段。文字材料?提問?音像材料其他：現(xiàn)場(chǎng)編碼演示__________

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

教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配

(1)展示Jqueu制作Tab選項(xiàng)卡效果，同時(shí)展示通過案例

Jquery代碼的展示及

JavaScript介紹ASPNET介紹案例對(duì)應(yīng)

源代碼的

jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的

JavaScript代碼庫(kù)(或JavaScript框架)。jQuery設(shè)計(jì)的宗旨是'writeLess,Do

More",即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代展示，讓

碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)5分鐘

課程導(dǎo)入畫設(shè)計(jì)和Ajax交互。學(xué)生體會(huì)

到使用JQ

<scripttype="text/javascript”>

$(functionO{是可以讓

$("#myTabs").tabs0;

})代碼變

</script>少，提高

(2)展示Jquery制作幻燈片效果，及其實(shí)現(xiàn)代碼

編程開發(fā)

教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配

效率的，

?1/瓣娃嫩聆讓學(xué)生理

解JQ的作

/v

1用。

slidr.createCppt',(

after：funrtion(e)(console,logCin:?e.in.slidr).),〃幻燈片/拍箔死后的回調(diào)函致

before:function(e>{console.lojCout:'+e.out.slidr):},〃在幻燈片過:g開蛤之前的回調(diào)的救

bceadcrunbs:true,//顯示或除藤面包18

controls:"border*,〃翌示或應(yīng)餐控制前頭?！咑?、'拐苗'或'Sfi*(border,cornerornone)

direction:'horizontal',〃/幻燈片的或認(rèn)方向。^**$5"Otorizontal>vertical)

fa加：false,〃幻燈片過裝是否應(yīng)該浜入/淡出

keyboard:true,〃是否啟用板標(biāo)皎盤與航

overflow:false,〃是否在SLLDR邊界上電出任攝

pause:false,〃在運(yùn)行時(shí)是否瞽停根標(biāo)攝作

theae:F222',〃設(shè)置面包18/控件的顏色主題

tian<:(rcube':'0.5seise-in*),〃自定義動(dòng)SB定時(shí)應(yīng)用。(?過裝”：?■計(jì)時(shí)”)?(Ctransition7:)

touch:true,〃是否啟用修為珍笛的觸IS導(dǎo)航

“ansHaon:'cube?〃要應(yīng)用的量認(rèn)依抽。-立方體",一線性"、-命交”或??無”?(cube,linear,fade,ornone)

I),addCh",「one','two','three','four','five','one'】)

.auto(5000).

(3)提問學(xué)生，如果不使用Jquery而直接使用原生

JS去實(shí)現(xiàn)效果，是否需要更多更復(fù)雜的代碼才行。

1.介紹課程的授課計(jì)劃、考核標(biāo)準(zhǔn)

(1)平時(shí)成績(jī)占30%,包括出勤、作業(yè)、提問，課堂介紹整門

項(xiàng)目(作業(yè))、綜合項(xiàng)目完成情況等。

課程的授

(2)考試成績(jī)占70%。

2.提問為什么JS已經(jīng)可以編寫網(wǎng)頁(yè)腳本了，為什么還課即考核

需要類似Jque。這樣的庫(kù)。計(jì)劃并通

3.提問Jquery和JavaScript有關(guān)系嗎。

雌桂召過提問和

4.根據(jù)學(xué)生對(duì)提問的回答，介紹JavaScript相關(guān)基本15分鐘

概念和特點(diǎn)。介紹大致

(1)jQuery是一個(gè)JavaScript庫(kù)，jQuery極大了解使用

地簡(jiǎn)化了JavaScript編程。Jquery的

(2)jQuery的宗旨：Writeless,domore。

作用和好

(3)學(xué)習(xí)JQuery需要具備的基礎(chǔ)知識(shí)：

[1]HTML;[2]CSS：[3]JavaScript處。

讓學(xué)生清

(1)告知學(xué)生，Jquery仍然屬于網(wǎng)頁(yè)腳本，那么開發(fā)

楚在什么

工具沒有什么要求，之前大家寫HTML,Javascript習(xí)

Jquery開發(fā)慣用什么開發(fā)工具編寫，現(xiàn)在仍然可以使用之前的工工具下編

環(huán)境和運(yùn)行具，并告知，在課堂上老師選擇HbuiIder進(jìn)行開發(fā)。寫Jquery10分鐘

環(huán)境的僻(2)打開Jquery的官網(wǎng)，以及在百度搜索一些資源

代碼以及

網(wǎng)站，告知學(xué)生想使用Jquei'y必須下載Jquery相關(guān)

的庫(kù)文件才能進(jìn)行開發(fā)。Jquery的

卜載

原生JS錯(cuò)給出

(1)讓學(xué)生閱讀以下代碼，提問其執(zhí)行結(jié)果：20分鐘

誤代碼思JavaScript

教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配

考，引出<html>代碼讓學(xué)生

<head>

<charset="UTF-8">

Jquery的解<與(document).ready的使用</ti>復(fù)習(xí)，并且

<type="text/css">

#mylmg{display:none;}

</style>指出JS代

<2type="text/javascript">

碼容易出問

document.getElementById("myImg").style.display="block";

</script>

</head>題的地方，

<body>在Jquery

<:id="my1mg"src=nimg/glml.jpg'*>

</body>中則不需要

</1

考慮這么多

(2)右弋碼劊艮錯(cuò)，原因是JS寫在了需要獲取元素HIML的前

問題，引出

面，網(wǎng)頁(yè)從上向下解析，在JS中芯域取元素而報(bào)錯(cuò)。

Jquery,讓

(3)給出JS的解決方案，即以下漏防案

學(xué)生對(duì)

【1】將JS代碼的位置蹦，放到后面

Jquery/*^.

【2】將JS封裝成函數(shù)，在body的onload事件中去調(diào)用函數(shù)

(4)御期EJquery中，^fWjquery崢駟格彩艘I

不需要考慮上述問題，引出Jquery的基本詰法。

(1)婀和上個(gè)環(huán)節(jié)相1可功能，艮嘴隘鼬元素顯示出來，給出通過案例讓

Jquery的解｝舫案。學(xué)生了解

第一個(gè)⑴將下載的jquery庫(kù)文件，艇體次目錄中。Jquery6W

10分鐘

Jquery,辨[2]在網(wǎng)頁(yè)的頭部引入Jquery庫(kù)文件。勢(shì)和Jquery

<type="text/javascript"src=Hjs/jquery.js"></>的基本編碼

[3]編寫Jquery代磅覬功能。風(fēng)格。

教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配

<type="text/javascript">

〃圖片默認(rèn)是隱藏的，要實(shí)現(xiàn)圖片自動(dòng)顯不

〃此程序會(huì)報(bào)錯(cuò)，原因是頁(yè)面HTML還沒有解析下載完成，無法獲取到mylmg圖片

〃解決方案有如下：

〃(1)將JS代碼放到mylmg圖片的后面

〃(2)封裝成函數(shù)，在body的。nload事件中取調(diào)用

〃(3)使用［query,并將代碼寫在$(document).ready中

//$(document).ready(function()

//{

////$("#mylmg,').cssC'display''^"blockn);

//$().show(200Q);

//1)

〃或簡(jiǎn)寫

$(function(){

//$("#mylmg").css("display**^"block");

$("#mylmg").show(2000);

?)

</:二)

讓學(xué)生自己

^J￥^一

學(xué)生實(shí)踐完

(1)下發(fā)Jquery的庫(kù)文付給學(xué)生。個(gè)簡(jiǎn)單程

成第一個(gè)

⑵讓學(xué)生參照老師上小種演示的例子,編寫第fJquery代序，數(shù)量掌10分鐘

Jquery的程

碼，實(shí)現(xiàn)彈出對(duì)話框>顯^“Hello,Jquery”文本。握J(rèn)query

序

的使用方

-1X

現(xiàn)場(chǎng)演示，通過點(diǎn)擊不同順鈕^現(xiàn)圖片的顯示，隱藏以及顯示

媒。

生體

顯示圖片1隱藏圖片1切換狀態(tài)1

告Ijjquery

介紹

編碼的簡(jiǎn)

show,hide,

單，只10分鐘

toggle顯示

彳眇的代碼

研

即可控制圖

飛<

片的顯示，

學(xué)生實(shí)驗(yàn)完(1)提出茗網(wǎng)場(chǎng)編題猱例中顯示，隱藏以S切解果并沒讓學(xué)生自行5分鐘

教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配

成圖片顯有中間過渡效果，如果使用JS寫過渡效果工作圜艮大，其實(shí)動(dòng)手體驗(yàn)

示，隱藏和Jquery庫(kù)中舉旭渡效果也給我僮寸斷了。Jquery堤

切換狀態(tài)功(2)下發(fā)Jquery的及API文陛■綽生，讓牲自行查閱文性物隱藏

能熨財(cái)喀前明傲果并比舲優(yōu)化,刑嗔中間的逑魅媒。

顆化任務(wù)

來鍛煉學(xué)生

查閱API文

檔的自學(xué)能

力。

布置預(yù)習(xí)

思考題或預(yù)習(xí)作業(yè)：任務(wù)，讓

預(yù)習(xí)Jquery的封裝操作和上課自動(dòng)顯示隱藏效果的實(shí)

預(yù)習(xí)題或?qū)W生提前5分鐘

現(xiàn)

作業(yè)題預(yù)習(xí)下一

章內(nèi)容。

參考資料2.菜鳥教程https://www.runoob.com/

3.jQuery和Ajax實(shí)戰(zhàn)教程

本次課程為第一次課，主要起到的作用是引導(dǎo)作

用，讓學(xué)生真正體會(huì)到Jquery的魅力即可，不需要太

課后小結(jié)多復(fù)雜的案例，要讓學(xué)生對(duì)后面的Jquery學(xué)習(xí)充滿興

趣即可，課程案例需要簡(jiǎn)單，讓學(xué)生用最少的代碼完

成實(shí)際功能，增強(qiáng)學(xué)生的成就感和求知欲。

課程教案

課題名稱JQuery+Ajxa應(yīng)用開發(fā)

授課班級(jí)授課學(xué)時(shí)2

授課地點(diǎn)授課形式上機(jī)

參考教材《jQuery和Ajax實(shí)戰(zhàn)教程》

教學(xué)資源

https:〃www.runoob.com/一菜鳥教程

知識(shí)目標(biāo)：

教學(xué)目標(biāo)1、理解Jquery的本質(zhì)及宗旨。

2、熟悉Jquery的編碼風(fēng)格。

3、使用Jquery實(shí)現(xiàn)簡(jiǎn)單的顯示隱藏網(wǎng)頁(yè)元素效果。

技能目標(biāo)：

1、熟練掌握J(rèn)query頁(yè)面加載事件

2、熟悉Jquery的編碼風(fēng)格。

3、使用Jquery實(shí)現(xiàn)簡(jiǎn)單的顯示隱藏網(wǎng)頁(yè)元素效果。

素質(zhì)目標(biāo)：

學(xué)生可以基本熟悉Jquery開發(fā)環(huán)境，編寫第一個(gè)Jquery程序。

粒

學(xué)

重

點(diǎn)熟練掌握J(rèn)query頁(yè)面加載事件，熟悉Jquery編碼風(fēng)格

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

弱

學(xué)

難

點(diǎn)點(diǎn)

Jquery實(shí)現(xiàn)網(wǎng)頁(yè)元素的顯示隱藏效果。

本次建艮程為Jquery課程的第一個(gè)課，需要給學(xué)生揭開Jquery神秘的面

紗，11:學(xué)生知道Jquery就是一個(gè)JS庫(kù)，理解使用Jquery的作用，熟悉

學(xué)情分析

Jquery的編碼風(fēng)格，主要需要讓學(xué)生體會(huì)到Jquery相對(duì)原生JS比較，

可以』5寫更少的代碼完成功能。

課前：

準(zhǔn)備有關(guān)Jquery相關(guān)的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對(duì)

Jquery產(chǎn)生興趣。

課中：

1、理解Jquery的本質(zhì)及宗旨。

教學(xué)過程

2、熟悉Jquery的編碼風(fēng)格。

3、使用Jquery實(shí)現(xiàn)簡(jiǎn)單的顯示隱藏網(wǎng)頁(yè)元素效果。

課后：

布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章，讓學(xué)生學(xué)習(xí)Jquery中的選擇器和篩選器有

哪些。

本次課程為第一次課，主要起到的作用是引導(dǎo)作用，讓學(xué)生真正體會(huì)到

Jquery的魅力即可，不需要太多復(fù)雜的案例，要讓學(xué)生對(duì)后面的Jque可

教學(xué)反思

學(xué)習(xí)充滿興趣即可，課程案例需要簡(jiǎn)單，讓學(xué)生用最少的代碼完成實(shí)際

功能，增強(qiáng)學(xué)生的成就感和求知欲。

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

課程名稱使用Jquery優(yōu)化Web頁(yè)面授課對(duì)象

第1章Jquery框架簡(jiǎn)介

本次課學(xué)

授課章節(jié)2學(xué)時(shí)

第1-3節(jié)Jquery簡(jiǎn)介，Jquery第―?個(gè)程時(shí)數(shù)

序，Jquery實(shí)現(xiàn)顯示隱藏元素。

1、理解Jquery的本質(zhì)及宗旨。

教學(xué)目的2、熟悉Jquery的編碼風(fēng)格。

3、使用Jqueiry實(shí)現(xiàn)簡(jiǎn)單的顯示隱藏網(wǎng)頁(yè)元素效果。

本次課程為Jquery課程的第一個(gè)課,需要給學(xué)生揭開Jquery神秘的面紗，

讓學(xué)生知道Jquery就是一個(gè)JS庫(kù)，理解使用Jquery的作用，熟悉Jquery的

教學(xué)分析

編碼風(fēng)格，主要需要讓學(xué)生體會(huì)到Jquery相對(duì)原生JS比較，可以書寫更少的

代碼完成功能。

教學(xué)重點(diǎn)重點(diǎn)熟練掌握J(rèn)query頁(yè)面加載事件，熟悉Jquery編碼風(fēng)格

與

難點(diǎn)難點(diǎn)Jquery實(shí)現(xiàn)網(wǎng)頁(yè)元素的顯示隱藏效果。

教學(xué)方法?課堂講授?講解例題?電子課件。案例分析。小組討論

與手段。文字材料?提問?音像材料其他：現(xiàn)場(chǎng)編碼演示____________

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

教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配

回顧上節(jié)課所講的內(nèi)容，并講解本次課需要講解的內(nèi)

課程導(dǎo)入回顧課程10分鐘

容

讓學(xué)生將

(1)給學(xué)史標(biāo)圖片，不需要點(diǎn)擊按鈕，自動(dòng)進(jìn)行顯利輟燼

學(xué)生實(shí)驗(yàn)完Jquery謠去

不停僻f初換的效果。

成自動(dòng)循環(huán)和JS函數(shù)

(2)提1句學(xué)生要完成此W，需要通過什么JS函蜘狗循

進(jìn)行顯示隱結(jié)創(chuàng)蛹，20分鐘

郴同的嬲

藏切換效提升其靈活

(3)提示學(xué)生需要用到JS耕t器，并進(jìn)行時(shí)器語法的復(fù)習(xí)。

果。遨族口識(shí)的

(4)布置任務(wù)，讓學(xué)生完成M演示效暴

能力

(1)彩召toggle與toggleClass乍用。

讓學(xué)生自己

[1]toggle：如果薄是可財(cái)，如果藤是

toggleClas

繳的，珈炯見的。

s與toggle量的使用，10分鐘

[2]toggleClass：如果存在(不存在)就i賒傣加)f

的蝴增弓睇生動(dòng)

棄防

(2)雨案例皿

教學(xué)內(nèi)容教學(xué)過程設(shè)計(jì)意圖時(shí)間分配

個(gè)人信息維護(hù)

?基本信息維護(hù)

?密碼管理

?頭像管理

?收黃地址管理

[1]鼠標(biāo)移動(dòng)至U“個(gè)人信息級(jí)”的時(shí)候字體顏色醛E,鼠標(biāo)

[2]麟示點(diǎn)擊“個(gè)人信息級(jí)”闡候下面的列頹以自動(dòng)

⑶提問學(xué)生上述兩個(gè)要求功能，哪個(gè)功能需要使用到toggle,哪

個(gè)痂自颼酰到toggleClass,并和學(xué)生Hg和蔑腮路

鍛蜘手能

學(xué)生實(shí)驗(yàn)完力，讓學(xué)生

成上個(gè)環(huán)節(jié)(1)下效驗(yàn)t終效釉學(xué)生SWtoggle

30分鐘

演示效果的(2)睜生蝴/羽;節(jié)的分析思路