版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
课程教案
课题名称JQuery+Ajxa应用开发
授课班级授课学时2
授课地点授课形式讲授
参考教材《jQuery和Ajax实战教程》
教学资源
https://www.runoob.com/一菜鸟教程
知识目标：
1、理解Jqueiry的本质及宗旨。
2、熟悉Jquery的编码风格。
3、使用Jquery实现简单的显示隐藏网页元素效果。
技能目标：
教学目标
1、熟练掌握Jquery页面加载事件
2、熟悉Jquery的编码风格。
3、使用Jquery实现简单的显示隐藏网页元素效果。
素质目标：
学生可以基本熟悉Jquery开发环境，编写第一个Jquery程序。
教学
熟练掌握Jquery页面加载事件，熟悉Jquery编码风格
重点
教学重点与难
教学
点Jquery实现网页元素的显示隐藏效果。
难点
本次蓝艮程为Jquery课程的第一个课，需要给学生揭开Jquery神秘的面
纱，11:学生知道Jquery就是一个JS库，理解使用Jquery的作用，熟悉
学情分析
Jquery的编码风格，主要需要让学生体会到Jquery相对原生JS比较，
可以彳5写更少的代码完成功能。
课前：
准备有关Jquery相关的介绍，方便在课程开始给学生介绍，让学生对
Jquery产生兴趣。
课中：
1、理解Jquery的本质及宗旨。
教学过程
2、熟悉Jquery的编码风格。
3、使用Jquery实现简单的显示隐藏网页元素效果。
课后：
布置预习任务，预习下一章，让学生学习Jquery中的选择器和筛选器有
哪些。
本次课程为第一次课，主要起到的作用是引导作用，让学生真正体会到
Jquery的魅力即可，不需要太多复杂的案例，要让学生对后面的Jquery
教学反思
学习充满兴趣即可，课程案例需要简单，让学生用最少的代码完成实际
功能，增强学生的成就感和求知欲。
教学设计
课程名称使用Jquery优化Web页面授课对象
第1章Jquery框架简介
本次课学
授课章节第1-3节Jquery简介，Jquery第一个程2学时
时数
序，Jqueiry实现显示隐藏元素。
1、理解Jquery的本质及宗旨。
教学目的2、熟悉Jquery的编码风格。
3、使用Jquery实现简单的显示隐藏网页元素效果。
本次课程为Jquery课程的第一个课,需要给学生揭开Jquery神秘的面纱，
让学生知道Jquery就是一个JS库，理解使用Jquery的作用，熟悉Jquery的
教学分析
编码风格，主要需要让学生体会到Jquery相对原生JS比较，可以书写更少的
代码完成功能。
教学重点重点熟练掌握Jquery页面加载事件，熟悉Jquery编码风格
与
难点难点Jquery实现网页元素的显示隐藏效果。
教学方法•课堂讲授•讲解例题・电子课件。案例分析。小组讨论
与手段。文字材料•提问・音像材料其他：现场编码演示__________
教学过程设计
教学内容教学过程设计意图时间分配
(1)展示Jqueu制作Tab选项卡效果，同时展示通过案例
Jquery代码的展示及
JavaScript介绍ASPNET介绍案例对应
源代码的
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的
JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是'writeLess,Do
More",即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代展示，让
码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动5分钟
课程导入画设计和Ajax交互。学生体会
到使用JQ
<scripttype="text/javascript”>
$(functionO{是可以让
$("#myTabs").tabs0;
})代码变
</script>少，提高
(2)展示Jquery制作幻灯片效果，及其实现代码
编程开发
教学内容教学过程设计意图时间分配
效率的，
♦1/瓣娃嫩聆让学生理
解JQ的作
/v
1用。
slidr.createCppt',(
after：funrtion(e)(console,logCin:♦e.in.slidr).),〃幻灯片/拍箔死后的回调函致
before:function(e>{console.lojCout:'+e.out.slidr):},〃在幻灯片过:g开蛤之前的回调的救
bceadcrunbs:true,//显示或除藤面包18
controls:"border*,〃翌示或应餐控制前头。‘边隹'、'拐苗'或'Sfi*(border,cornerornone)
direction:'horizontal',〃/幻灯片的或认方向。^**$5"Otorizontal>vertical)
fa加：false,〃幻灯片过装是否应该浜入/淡出
keyboard:true,〃是否启用板标皎盘与航
overflow:false,〃是否在SLLDR边界上电出任摄
pause:false,〃在运行时是否瞽停根标摄作
theae:F222',〃设置面包18/控件的颜色主题
tian<:(rcube':'0.5seise-in*),〃自定义动SB定时应用。(・过装”：•■计时”)♦(Ctransition7:)
touch:true,〃是否启用修为珍笛的触IS导航
“ansHaon:'cube•〃要应用的量认依抽。-立方体",一线性"、-命交”或••无”•(cube,linear,fade,ornone)
I),addCh",「one','two','three','four','five','one'】)
.auto(5000).
(3)提问学生，如果不使用Jquery而直接使用原生
JS去实现效果，是否需要更多更复杂的代码才行。
1.介绍课程的授课计划、考核标准
(1)平时成绩占30%,包括出勤、作业、提问，课堂介绍整门
项目(作业)、综合项目完成情况等。
课程的授
(2)考试成绩占70%。
2.提问为什么JS已经可以编写网页脚本了，为什么还课即考核
需要类似Jque。这样的库。计划并通
3.提问Jquery和JavaScript有关系吗。
雌桂召过提问和
4.根据学生对提问的回答，介绍JavaScript相关基本15分钟
概念和特点。介绍大致
(1)jQuery是一个JavaScript库，jQuery极大了解使用
地简化了JavaScript编程。Jquery的
(2)jQuery的宗旨：Writeless,domore。
作用和好
(3)学习JQuery需要具备的基础知识：
[1]HTML;[2]CSS：[3]JavaScript处。
让学生清
(1)告知学生，Jquery仍然属于网页脚本，那么开发
楚在什么
工具没有什么要求，之前大家写HTML,Javascript习
Jquery开发惯用什么开发工具编写，现在仍然可以使用之前的工工具下编
环境和运行具，并告知，在课堂上老师选择HbuiIder进行开发。写Jquery10分钟
环境的僻(2)打开Jquery的官网，以及在百度搜索一些资源
代码以及
网站，告知学生想使用Jquei'y必须下载Jquery相关
的库文件才能进行开发。Jquery的
卜载
原生JS错给出
(1)让学生阅读以下代码，提问其执行结果：20分钟
误代码思JavaScript
教学内容教学过程设计意图时间分配
考，引出<html>代码让学生
<head>
<charset="UTF-8">
Jquery的解<与(document).ready的使用</ti>复习，并且
<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)右弋码刽艮错，原因是JS写在了需要获取元素HIML的前
问题，引出
面，网页从上向下解析，在JS中芯域取元素而报错。
Jquery,让
(3)给出JS的解决方案，即以下漏防案
学生对
【1】将JS代码的位置蹦，放到后面
Jquery/*^.
【2】将JS封装成函数，在body的onload事件中去调用函数
(4)御期EJquery中，^fWjquery峥驷格彩艘I
不需要考虑上述问题，引出Jquery的基本诘法。
(1)婀和上个环节相1可功能，艮嘴隘鼬元素显示出来，给出通过案例让
Jquery的解｝舫案。学生了解
第一个⑴将下载的jquery库文件，艇体次目录中。Jquery6W
10分钟
Jquery,辨[2]在网页的头部引入Jquery库文件。势和Jquery
<type="text/javascript"src=Hjs/jquery.js"></>的基本编码
[3]编写Jquery代磅觊功能。风格。
教学内容教学过程设计意图时间分配
<type="text/javascript">
〃图片默认是隐藏的，要实现图片自动显不
〃此程序会报错，原因是页面HTML还没有解析下载完成，无法获取到mylmg图片
〃解决方案有如下：
〃(1)将JS代码放到mylmg图片的后面
〃(2)封装成函数，在body的。nload事件中取调用
〃(3)使用［query,并将代码写在$(document).ready中
//$(document).ready(function()
//{
////$("#mylmg,').cssC'display''^"blockn);
//$().show(200Q);
//1)
〃或简写
$(function(){
//$("#mylmg").css("display**^"block");
$("#mylmg").show(2000);
?)
</:二)
让学生自己
^J¥^一
学生实践完
(1)下发Jquery的库文付给学生。个简单程
成第一个
⑵让学生参照老师上小种演示的例子,编写第fJquery代序，数量掌10分钟
Jquery的程
码，实现弹出对话框>显^“Hello,Jquery”文本。握Jquery
序
的使用方
-1X
现场演示，通过点击不同顺钮^现图片的显示，隐藏以及显示
媒。
生体
显示图片1隐藏图片1切换状态1
告Ijjquery
介绍
编码的简
show,hide,
单，只10分钟
toggle显示
彳眇的代码
研
即可控制图
飞<
片的显示，
学生实验完(1)提出茗网场编题猱例中显示，隐藏以S切解果并没让学生自行5分钟
教学内容教学过程设计意图时间分配
成图片显有中间过渡效果，如果使用JS写过渡效果工作圜艮大，其实动手体验
示，隐藏和Jquery库中举旭渡效果也给我僮寸断了。Jquery堤
切换状态功(2)下发Jquery的及API文陛■绰生，让牲自行查阅文性物隐藏
能熨财喀前明傲果并比舲优化,刑嗔中间的逑魅媒。
颗化任务
来锻炼学生
查阅API文
档的自学能
力。
布置预习
思考题或预习作业：任务，让
预习Jquery的封装操作和上课自动显示隐藏效果的实
预习题或学生提前5分钟
现
作业题预习下一
章内容。
参考资料2.菜鸟教程https://www.runoob.com/
3.jQuery和Ajax实战教程
本次课程为第一次课，主要起到的作用是引导作
用，让学生真正体会到Jquery的魅力即可，不需要太
课后小结多复杂的案例，要让学生对后面的Jquery学习充满兴
趣即可，课程案例需要简单，让学生用最少的代码完
成实际功能，增强学生的成就感和求知欲。
课程教案
课题名称JQuery+Ajxa应用开发
授课班级授课学时2
授课地点授课形式上机
参考教材《jQuery和Ajax实战教程》
教学资源
https:〃www.runoob.com/一菜鸟教程
知识目标：
教学目标1、理解Jquery的本质及宗旨。
2、熟悉Jquery的编码风格。
3、使用Jquery实现简单的显示隐藏网页元素效果。
技能目标：
1、熟练掌握Jquery页面加载事件
2、熟悉Jquery的编码风格。
3、使用Jquery实现简单的显示隐藏网页元素效果。
素质目标：
学生可以基本熟悉Jquery开发环境，编写第一个Jquery程序。
粒
学
重
点熟练掌握Jquery页面加载事件，熟悉Jquery编码风格
教学重点与难
弱
学
难
点点
Jquery实现网页元素的显示隐藏效果。
本次建艮程为Jquery课程的第一个课，需要给学生揭开Jquery神秘的面
纱，11:学生知道Jquery就是一个JS库，理解使用Jquery的作用，熟悉
学情分析
Jquery的编码风格，主要需要让学生体会到Jquery相对原生JS比较，
可以』5写更少的代码完成功能。
课前：
准备有关Jquery相关的介绍，方便在课程开始给学生介绍，让学生对
Jquery产生兴趣。
课中：
1、理解Jquery的本质及宗旨。
教学过程
2、熟悉Jquery的编码风格。
3、使用Jquery实现简单的显示隐藏网页元素效果。
课后：
布置预习任务，预习下一章，让学生学习Jquery中的选择器和筛选器有
哪些。
本次课程为第一次课，主要起到的作用是引导作用，让学生真正体会到
Jquery的魅力即可，不需要太多复杂的案例，要让学生对后面的Jque可
教学反思
学习充满兴趣即可，课程案例需要简单，让学生用最少的代码完成实际
功能，增强学生的成就感和求知欲。
教学设计
课程名称使用Jquery优化Web页面授课对象
第1章Jquery框架简介
本次课学
授课章节2学时
第1-3节Jquery简介，Jquery第―•个程时数
序，Jquery实现显示隐藏元素。
1、理解Jquery的本质及宗旨。
教学目的2、熟悉Jquery的编码风格。
3、使用Jqueiry实现简单的显示隐藏网页元素效果。
本次课程为Jquery课程的第一个课,需要给学生揭开Jquery神秘的面纱，
让学生知道Jquery就是一个JS库，理解使用Jquery的作用，熟悉Jquery的
教学分析
编码风格，主要需要让学生体会到Jquery相对原生JS比较，可以书写更少的
代码完成功能。
教学重点重点熟练掌握Jquery页面加载事件，熟悉Jquery编码风格
与
难点难点Jquery实现网页元素的显示隐藏效果。
教学方法•课堂讲授•讲解例题・电子课件。案例分析。小组讨论
与手段。文字材料•提问・音像材料其他：现场编码演示____________
教学过程设计
教学内容教学过程设计意图时间分配
回顾上节课所讲的内容，并讲解本次课需要讲解的内
课程导入回顾课程10分钟
容
让学生将
(1)给学史标图片，不需要点击按钮，自动进行显利辍烬
学生实验完Jquery谣去
不停僻f初换的效果。
成自动循环和JS函数
(2)提1句学生要完成此W，需要通过什么JS函蜘狗循
进行显示隐结创蛹，20分钟
郴同的嬲
藏切换效提升其灵活
(3)提示学生需要用到JS耕t器，并进行时器语法的复习。
果。遨族口识的
(4)布置任务，让学生完成M演示效暴
能力
(1)彩召toggle与toggleClass乍用。
让学生自己
[1]toggle：如果薄是可财，如果藤是
toggleClas
缴的，珈炯见的。
s与toggle量的使用，10分钟
[2]toggleClass：如果存在(不存在)就i赊傣加)f
的蝴增弓睇生动
弃防
(2)雨案例皿
教学内容教学过程设计意图时间分配
个人信息维护
・基本信息维护
・密码管理
・头像管理
・收黄地址管理
[1]鼠标移动至U“个人信息级”的时候字体颜色醛E,鼠标
[2]麟示点击“个人信息级”阐候下面的列颓以自动
⑶提问学生上述两个要求功能，哪个功能需要使用到toggle,哪
个痂自飕酰到toggleClass,并和学生Hg和蔑腮路
锻蜘手能
学生实验完力，让学生
成上个环节(1)下效验t终效釉学生SWtoggle
30分钟
演示效果的(2)睁生蝴/羽;节的分析思路
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年教科新版必修3生物下册月考试卷含答案
- 2025年新科版选择性必修3生物下册阶段测试试卷含答案
- 2025年湘师大新版选择性必修1化学上册月考试卷含答案
- 2025年沪科新版高三历史上册月考试卷含答案
- 美容院二零二五年度美容仪器研发与创新基金投资合同4篇
- 2025年度绿色生态门面房购置与生态旅游开发合同4篇
- 二零二五年度美容院员工绩效考核与激励合同4篇
- 承揽合同的范本（2篇）
- 2025年度新能源汽车出租车股权转让合同范本4篇
- 二零二五版泥浆外运与固体废弃物处理合同4篇
- 课题申报书：GenAI赋能新质人才培养的生成式学习设计研究
- 骆驼祥子-(一)-剧本
- 全国医院数量统计
- 《中国香文化》课件
- 2024年医美行业社媒平台人群趋势洞察报告-医美行业观察星秀传媒
- 第六次全国幽门螺杆菌感染处理共识报告-
- 天津市2023-2024学年七年级上学期期末考试数学试题（含答案）
- 经济学的思维方式（第13版）
- 盘锦市重点中学2024年中考英语全真模拟试卷含答案
- 湖北教育出版社四年级下册信息技术教案
- 背景调查报告
评论
0/150
提交评论