《网站前端技术》教案第25课JQuery常用函数（二）.docx
-
资源ID：899554
资源大小：138.06KB
全文页数：10页
- 资源格式： DOCX
下载积分：5金币
快捷下载
账号登录下载
微信登录下载
三方登录下载：
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
《网站前端技术》教案第25课JQuery常用函数（二）.docx
&-二二二干,JJL_二r联勒*KML.-*ck*IrI*；-一三=.心：*7M*二:上二CfiK：.J.-GZ.tW.u.三一一二工二=3课题第25课JQUery常用函数(二)课时2课时(90min)教学目标知识技能目标：(1)掌握JQUery删除、查找、克隆元素(2)熟悉JQUery常用事件及典型案例素质目标：(1)掌握JQUery的基本使用方法，加强学生的网页设计能力(2)制作轮播图,锻炼学生的实践能力,培养学生的探究精神教学重难点教学重点：JQUery删除、查找及克隆元素，JQUery常用事件及典型案例教学难点：制作轮播图教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤(2min)一问题导入(5min)一传授新知(30min)一头脑风暴(8min)第2节课：问题导入(5min)一传授新知(Iomin)一综合案例(25min)一课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解JQuery删除、杳找及克隆元素的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入(5min)【教师】提出以下问题在JQuery中可以对元素进行哪些操作?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知(30min)5.4.JQuery删除、查找及克隆元素【教师】讲解JQUery删除、查找及克隆元素的相关内容5.4.1 删除元素remove()在JQUery中，常使用remove。删除元素，其语法格式如下：元素对象remove。；【示例5-4-1将【示例5-2-1中script标签修改为如下代码：通过教师讲解、课堂互动、演示陈总等方式，使学生了解JQuerr删除、查找及克隆元素的方法，熟悉JQueiy<script>$(function()varspan=$("span");span.remove();)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示效果：SPan元素的内容被删除。5.4.2 查找父元素parent()在JQUery中，常使用Parent(渣找父元素，其语法格式如下：元素对象Parent();【示例5-4-2将【示例5-4-1中<script>标签修改为如下代码：<script>$(function()varspan=S("span");alert(span.parent().html();!)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示效果弹出警告框显示SPan元素父元素的HTML内容却"<span>我的中国心<span>".5.4.3 查找子元素find()在JQUery中，常使用find()直找子元素，其语法格式如下：元素对象find。；【示例5-4-3将【示例5-4-1中<script>标签修改为如下代码：<script>$(function()varbox=$("#box");box.find("span").html("我的爱国心)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：辘id属性值为box的元素的子元素，将其中的span元素文本替换为"我的爱国心”。5.4.4 克隆元素ClOne()和追加元素appendTo。、append()在JQUery中含有一些方法可以克隆和追加元素。CIone()用于克隆指定的元素对象，其语法格式如下：元素对象clone();常用事件及典型案I例【提示】克隆元素之后还必须追加元素才能让克隆出来的元素出现在页面流中。appendTo()能够将一个元素对象作为子元素追加到另一个元素对象中，其语法格式如下：元素对象LaPPendTO(元素对象2);其中，元素对象1作为子元素被追加到元素对象2中。append。能够在一个元素对象中追加一个子元素，其语法格式如下：元素对象lappend(元素对象2);其中，元素对象2作为子元素被追加到元素对象1中。【示例5-44】将【示例5-4-3中<script>标签修改为如下代码：<script>S(function()varspan=S("span:eq(O)M);span.clone().appendTo("#box").html(',我的爱国心");I)<script>【教师】组织学生分组上机完成上面的任务.并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：复制span元素并追加到id属性值为box的元素内部末尾，将其中的文本设置为"我的爱国心"，即显示为"我的中国心我的爱国心"。【学生】聆听、记录、理解5.5JQUery常用事件及典型案例【教师】讲解JQUery常用事件的语法格式及典型案例JQuery有很多事件与JavaScript相匹配，下面介绍几种常用的DOM元素事件和窗口监听事件。常用的DOM元素事件。使用DOM元素事件的语法格式如下：元素对象.事件名称(funclion()事件触发行为);【课堂互动】中【教师】提问常用的DOM元素事件有哪些？÷【学生】聆听、思考、回答其中，常用的DOM元素事件有鼠标单击事件click。、鼠标移至事件mouseover。、鼠标移出事件mouseout()x获取焦点事件focus()x失去焦点事件blur()等。常用的窗口监听事件。使用窗口监听事件的语法格式如下：$(WindOW).事件名称(function。事件触发行为):-,-其中，常用的窗口监听事件有窗口滚动事件SCronToP()、窗口尺寸变化事件resize。等。5.5.1案例选项卡效果【场景描述】选项卡效果应用广泛，在许多网页中都能看到它的影子，它能够将同层级的内容折叠在一起，使用更小的页面空间展示更多的内容。【教师】PPt展示“选项卡交互前后效果”图片(详见教材)，并讲解【思路分析】(1)设置所有的选项卡元素为同一个类名，所有的内容元素为另一个相同的类名。(2)默认凸显第一个选项卡及相应内容。(3)在单击其中一个选项卡时，获取当前选项卡在该类元素中的下标index,同时，显示第index个内容元素并凸显第index选项卡，隐藏其他内容元素。步骤1【实现步骤】编辑HTML文档body标签的内容，代码如下：<body><divclass="title">-<div><divclass="tille">标题二<div><divclass="litle">标题三<div><divClaSS="litle">标题四<div>VdiVCIaSS="content"内容一<div><divCIaSS="conienT'>内容二vdiv><divclass="conienl">内容三<7div><divclass="conlent">内容四<div><body>【提示】少骤2步骤3注意引入JQUery函数库。设置选项卡元素与内容元素的基本样式。在相关联的JS文件中输入如下代码：$(function。$(".conteni").hide();$(".content:eq(0)M).show();S(,.titlereq(O),).css("background":"#B91720")；S(".title',).click(function()Varindex=S(this).index(',.title");S(,.content").hide();S(".content:eq("+index+")").show();S(".title").css("background":"blue")；$(".title:eq("+index+")'').css("background":"#B91720"!)；)【实现效果】页面加载后，显示"内容一"面板，单击"标题二"选项卡，显示“内容二"面板，依次类推。5.5.2案例一自动显示与隐藏的返回顶部按钮【场景描述】许多网页都设有“返回顶部"按钮，当窗口滚动条向下移动至一定位置时，单击该按钮可以快速返回窗口顶部。而在没有向下移动窗口滚动条时，该按钮应自动隐藏。【思路分析】定义检测窗口海切杀位道的事件，在囱口海动杀J贞麻包直大f定数值时,显小返回J贝部故社1I与海切杀J贝麻1Z直小JAtsX三Hjl隐融返回J贝部feti【实现步骤】ElZH在HTML文档中添加"返回顶部"按钮。E2三Jh通过CSS控制按钮为固定定位。El噩在相关联的Js文档中输入如下代码：window.onload=function()varbackTop=$("#back-Top");backTop.hide();S(window).scroll(funclion()if(S(window).scrollTop()>300)backlbp.show();elsebackTop.hide();)backTop.click(function()$(WindoW).ScrollTop(O);)【实现效果】页面加载后，显示页面内容及窗口滚动条。当向下移动300px后，页面右下角显示"返回顶部"按钮；当滚动条距离顶端位置小于300PX时，"返回顶部"按钮自动隐藏。【学生】聆听、记录、理解【教师】组织学生分组，围绕以下问题开展上机上机操作在之前创建的CoUrSe.hlml文件中，设置警告框，显示SPan元素父元素的HTML内容，通过上机操作巩(8min)即"<span>我的课程<span>",并设置页面加载后显示页面内容及窗口滚动条。固所学知识【学生】思考、上机第二节课【教师】提出以下问题问题导入(5min)如何实现弹性布局的图片展示？通过提问引导学生思考本节课内容【学生
