《网站前端技术》教案第25课JQuery常用函数（二）.docx

《《网站前端技术》教案第25课JQuery常用函数（二）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第25课JQuery常用函数（二）.docx（10页珍藏版）》请在优知文库上搜索。

1、&-二二二干,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并授法、实践练习法教学用具电脑、投影仪

2、、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤(2min)一问题导入(5min)一传授新知(30min)一头脑风暴(8min)第2节课：问题导入(5min)一传授新知(Iomin)一综合案例(25min)一课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解JQuery删除、杳找及克隆元素的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求

3、签到培养学生的组织纪律性，掌握学生的出勤情况问题导入(5min)【教师】提出以下问题在JQuery中可以对元素进行哪些操作?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知(30min)5.4.JQuery删除、查找及克隆元素【教师】讲解JQUery删除、查找及克隆元素的相关内容5.4.1 删除元素remove()在JQUery中，常使用remove。删除元素，其语法格式如下：元素对象remove。；【示例5-4-1将【示例5-2-1中script标签修改为如下代码：通过教师讲解、课堂互动、演示陈总等方式，使学生了解JQ

4、uerr删除、查找及克隆元素的方法，熟悉JQueiy$(function()varspan=$(span);span.remove();)【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示效果：SPan元素的内容被删除。5.4.2 查找父元素parent()在JQUery中，常使用Parent(渣找父元素，其语法格式如下：元素对象Parent();【示例5-4-2将【示例5-4-1中标签修改为如下代码：$(function()varspan=S(span);alert(span.parent().html();!)【教师】

5、组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示效果弹出警告框显示SPan元素父元素的HTML内容却我的中国心.5.4.3 查找子元素find()在JQUery中，常使用find()直找子元素，其语法格式如下：元素对象find。；【示例5-4-3将【示例5-4-1中标签修改为如下代码：$(function()varbox=$(#box);box.find(span).html(我的爱国心)【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：辘id属性值为

6、box的元素的子元素，将其中的span元素文本替换为我的爱国心”。5.4.4 克隆元素ClOne()和追加元素appendTo。、append()在JQUery中含有一些方法可以克隆和追加元素。CIone()用于克隆指定的元素对象，其语法格式如下：元素对象clone();常用事件及典型案I例【提示】克隆元素之后还必须追加元素才能让克隆出来的元素出现在页面流中。appendTo()能够将一个元素对象作为子元素追加到另一个元素对象中，其语法格式如下：元素对象LaPPendTO(元素对象2);其中，元素对象1作为子元素被追加到元素对象2中。append。能够在一个元素对象中追加一个子元素，其语法格式

7、如下：元素对象lappend(元素对象2);其中，元素对象2作为子元素被追加到元素对象1中。【示例5-44】将【示例5-4-3中标签修改为如下代码：S(function()varspan=S(span:eq(O)M);span.clone().appendTo(#box).html(,我的爱国心);I)【教师】组织学生分组上机完成上面的任务.并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：复制span元素并追加到id属性值为box的元素内部末尾，将其中的文本设置为我的爱国心，即显示为我的中国心我的爱国心。【学生】聆听、记录、理解5.5JQUery常用事件

8、及典型案例【教师】讲解JQUery常用事件的语法格式及典型案例JQuery有很多事件与JavaScript相匹配，下面介绍几种常用的DOM元素事件和窗口监听事件。常用的DOM元素事件。使用DOM元素事件的语法格式如下：元素对象.事件名称(funclion()事件触发行为);【课堂互动】中【教师】提问常用的DOM元素事件有哪些？【学生】聆听、思考、回答其中，常用的DOM元素事件有鼠标单击事件click。、鼠标移至事件mouseover。、鼠标移出事件mouseout()x获取焦点事件focus()x失去焦点事件blur()等。常用的窗口监听事件。使用窗口监听事件的语法格式如下：$(WindOW)

9、.事件名称(function。事件触发行为):-,-其中，常用的窗口监听事件有窗口滚动事件SCronToP()、窗口尺寸变化事件resize。等。5.5.1案例选项卡效果【场景描述】选项卡效果应用广泛，在许多网页中都能看到它的影子，它能够将同层级的内容折叠在一起，使用更小的页面空间展示更多的内容。【教师】PPt展示“选项卡交互前后效果”图片(详见教材)，并讲解【思路分析】(1)设置所有的选项卡元素为同一个类名，所有的内容元素为另一个相同的类名。(2)默认凸显第一个选项卡及相应内容。(3)在单击其中一个选项卡时，获取当前选项卡在该类元素中的下标index,同时，显示第index个内容元素并凸显第

10、index选项卡，隐藏其他内容元素。步骤1【实现步骤】编辑HTML文档body标签的内容，代码如下：-标题二标题三标题四VdiVCIaSS=content内容一内容二vdiv内容三内容四【提示】少骤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(

11、,.title);S(,.content).hide();S(.content:eq(+index+).show();S(.title).css(background:blue)；$(.title:eq(+index+).css(background:#B91720!)；)【实现效果】页面加载后，显示内容一面板，单击标题二选项卡，显示“内容二面板，依次类推。5.5.2案例一自动显示与隐藏的返回顶部按钮【场景描述】许多网页都设有“返回顶部按钮，当窗口滚动条向下移动至一定位置时，单击该按钮可以快速返回窗口顶部。而在没有向下移动窗口滚动条时，该按钮应自动隐藏。【思路分析】定义检测窗口海切杀位道的事件

12、，在囱口海动杀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(funct

13、ion()$(WindoW).ScrollTop(O);)【实现效果】页面加载后，显示页面内容及窗口滚动条。当向下移动300px后，页面右下角显示返回顶部按钮；当滚动条距离顶端位置小于300PX时，返回顶部按钮自动隐藏。【学生】聆听、记录、理解【教师】组织学生分组，围绕以下问题开展上机上机操作在之前创建的CoUrSe.hlml文件中，设置警告框，显示SPan元素父元素的HTML内容，通过上机操作巩(8min)即我的课程,并设置页面加载后显示页面内容及窗口滚动条。固所学知识【学生】思考、上机第二节课【教师】提出以下问题问题导入(5min)如何实现弹性布局的图片展示？通过提问引导学生思考本节课内容【学生