《网站前端技术》教案第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)如何实现弹性布局的图片展示？通过提问引导学生思考本节课内容【学生】思考、举手回答传授新知(10min)5.5.3案例弹性布局的图片展示【教师】讲解弹性布局的图片展示案例的具体内容【场景描述】通过教师讲解，使学生了解实现弹性布局的图片展示的具体方法>»-,-【教师】PPt展示”宽屏显示效果”“窄屏显示效果”图片(详见教材)，并讲解网站在设计时需要考虑适用性，为了能够让网站中的图片清晰地呈现在大多数电子产品 上，程序员会根据不同的窗口宽度引用不同的图片源，并且履着窗口大小的改变动态适应。例如，苹果官网展示的手机图片，在宽屏显示时，显示为横向图片；在窄屏显示时，显 示为纵向图片。【思路分析】首先判断窗口的宽度，为该状态设置合适的图片源。当窗口大小每次发生变化时，都重 新判断窗口宽度，为此状态设置合适的图片源。【实现步骤】步骤1步骤2在HTML文档中添加一个img元素，其src属性值为空，id属性值为img 1 在相关的JS文件中输入以下代码：window.onload = function() function resizeShow() if ($(WindOW).width。> 700) S("img").at(r(,src", "img/iphonel .jpg").css( "width": "80%")； else S("img").attr("src", "imgiphone2.jpg").css( "width": "40%,)；I)$(window).resize(function() resizeShow();)resizeShow();【实现效果】页面首次加载后判断窗口宽度是否大于700 PX ,如果是，则显示图片"iphonel.jpg"； 如果不是，则显示图片"iphone2jpg"。在改变窗口大小时，随时判断窗口宽度是否大于700 PX ,并应用相对应的图片源。【提示】(I )为方便测试窗口宽度，该案例封装了尺寸显示函数resizeShow。(2 ) resize。为响应窗口尺寸变化的事件函数。【学生】聆听、记录、理解5.6综合案例轮播图【教师】讲解制作轮播图的具体流程【课堂互动】综合案例(25 min)十【教师】提问轮播图可以起到什么效果？制作轮播图需要用到哪些内容？通过教师讲解、 课堂互动等方式， 让学生了解制作轮 播图的具体流程和 操作方法÷【学生】聆听、思考、回答JQUery配合CSS3共同使用，能够为平铺直叙的网页添加许多生动的动态效果。例如，许多网站头部都有的轮播图效果，就是使用了JQuery中的时间间隔函数，让广告图片自动轮播，实现更加亮眼的宣传效果。【教师】PPt展示”轮播图瞬间效果”图片(详见教材)，并讲解具体制作要求有以下几点。(1)轮播图放置在页面正中央。【高手点拨】为了让元素永远放置在窗口正中央，应同时设置固定定位、外源隅性值为auto,左右上下偏移量均为Oe(2)轮播图每次播放三张图片，其中第一张图片绕自身中心旋转"45度"，第二张图片沿纸面向外方向前移200px,第三张图片绕自身中心旋转"-45度"。(3)每次轮播向左移一张图片。【案例实现】1.搭建网站，创建相关HTML、CSS.JS文件(1)在C盘创建文件夹"lunbo",并在其中创建目录"css""js""img”.(2)将素材"img”文件夹整体复制到"C:/IUnbo"。(3)创建windex.htm文件并保存在wCzZlunbow(4)创建"index.css”文件并保存在"C:/IUnbocss"(5)创建"index.js”文件并保存在HC:/lunbo/jsH(6)将,jquery-1.12.l.js,r文件复制并粘贴到"Chnbojs".(7)编辑windex.htmlw文档头部，将,index.csswwindex.js"wjquery-1.12.1.jsw文件关联至本页面。2 .在页面中添加div元素并使其处于窗口中央(1)在index.html中添加div元素，设置id属性值为IUnbo-box.(2)在index.css中设置该元素的大小为1200×200(单位为px),固定在窗口的正中央，隐藏溢出部分。3 .在div元素中添加一个子元素(1)在刚添加的div元素中再添加一个div元素，id属性值为IUnbO-boxs。(2)在index.css中设置该元素的大小为3200×200(单位为PX).4 .循环加我8个div元素并在其中添加img元素在index.js文件的窗口加载事件中，使用循环语句在id属性值为lunbo-boxs的div元素中添加8个类名为IUnbo的div子元素,且每个div子元素内都添加一个img元素，其中引用的图片地址为,bannerLjpgwi,banner8.jpgw具体代码如下：for(vari=1;i<=8;i+)varimgs=S("<divclass="lunbo,><imgsrc='imgbanner"+i+',.jpg,><div>");imgs.appendTo("#lunbo-boxs");5 .设置8个div子元素的CSS样式(1)设置它们的大小为400x130(单位为PX),上边S巨为30PX,向左浮动.(2)设置它们的透视焦距为800px,透视中心为"centercenter"。6 .设置前三张图片的3D转换样式并封装ShoV函数()在index.js的文件中封装show函数，设置前三张图片的初始化状态。即第一张图片绕Y轴旋转"45deg",第二张图片沿屏幕向外平移200px,第三张图片绕Y轴旋转45deg”,具体代码如下：functionshow()$(".Iunboieq(O)img").css("transform":"rotateY(45deg)")；$(".lunbo:eq(l)img").css("transform":"translate以200px)”)；$(".lunbo:eq(2)img").css("transform'*:"rotateY(-45deg)")；)(2)在index.js文件的窗口加载事件中调用ShOW函数。7.实现轮播效果(I)在index.js文件中使用间隔函数，使得每2S轮播一张banner图片。间隔函数的语法格却吓：setlnterval(function()代码块),2000);(2)在时间间隔函数中，将第一个轮播的图片移动到其父元素末尾，并再次调用ShOw函数，完成轮播的动作。具体代码如下：$(".lunbo:eq(0)").remove().appendTo("#lunbo-boxs");show();【教师】讲解代码参考1. HTML部分<divid="lunbo-box"><divid="lunbo-boxs"><div><div>2. .CSS部分#lunbo-boxposition:fixed;margin:auto;boltom:0;lop:0;right:O;left:O;width:1200px;height:200px;overflow:hidden;)(详见教材)3. JS部分window.onload=function()for(vari=1;i<=8;i+)varimgs=S("<divclass='lunbo,><imgsrc='imgbanner"+i+',.jpg,><div>,');imgs.appendTo("#lunbo-boxs");show();setlnterval(function()S(".lunbo:eq(0)").remove().appendTo("#Iunbo-boxs");show();,2000);(详见教材)【学生】聆听、记录、理解课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了JQuery删除、查找及克隆元素的方法，JQuery常用事件及典型案例等内容，讲解了制作轮播图的具体流程,希望通过本节课的讲解，大家可以掌握相关方法与操作，并对JQUery有更深入地了解。【学生】总结回顾知识点总结知识点，巩固学生对JQuery,删除、查找及克隆元素、JQUery常用事件及典型案例、制作轮播图等相关知识的印象作业布置(2min)【教师】布置课后实训作业个人作业：请根据课堂所学知识，完成课后习题团队作业：请利用"实训I作业素材()5-JQuery"文件夹中的图像素材，应用JQlIery函数库及已学HTMLHTML5xCSS/CSS3、JavaScript技术制作选项卡效果。要求单击左侧竖选项卡时，右侧应显示相应的图片。【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课环节完整，但学生主动性不高。教学按老办法、老观念去教，还是那样刻板，教学手段单一，学生的学习动机定会下降。要让学习动机成为推动学生参与学习活动心理动因，教师积极创设情境，采用多样化的教学方法，提升学生学习的积极性和主动性。
