《网站前端技术》教案第24课JQuery常用函数（一）.docx
课题第24课JQUery常用函数（一）课时2课时(90min)教学目标知识技能目标：（1）掌握JQuen捕获及创建HTML（2）掌握JQuery获取及设置元素内容、文本、属性（3）掌握JQUery设置HTML元素的CSS样式素质目标：掌握JQuery的基本使用方法，加强学生的网页设计能力教学重难点教学重点：JQuery捕获及创建HTML元素，JQuery设置及获取HTML相关内容或属性教学难点：JQuery设置HTML元素CSS样式教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（30min）一头脑风暴（8min）第2节课：问题导入（5min）一传授新知（25min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解JQUery基本使用方法的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题Jquery具有什么功能？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（30min）5.1JQuery捕获及创建HTML元素【教师】讲解捕获元素、创建HTML元素、获取同类名元素的下标值等内容÷【多媒体】组织学生扫码播放"JQuery的基本使用”视频（详见教材），让学生对这部分内容有一个大致地了解通过教师讲解、课堂互动、演示操作等方式，使学生了解JQUery捕获及创建HTML元素的相关方法JQUery能够捕获HTML元素，其中的捕获机制与在CSS中使用选择器匹配元素相同。此外，JQuery还能创建元素，其创建方式与捕获元素相同，都是使用方法该方法"()"中通常使用字符串参数，参数包括HTML标签与CSS选择器等。5.1.1捕获元素在JQUery中捕获元素时，捕获不同元素的$()方法，"()"中字符串参数是不同的.根据id名称捕获HTML元素的语法格式如下：S("#id名称")例如，捕获id名称为A的元素，代码如下：$("#A")根据类名捕获HTML元素的语法格式如下：$(”.类名”)例如，捕获类名为B的元素，代码如下：根据标签名称捕获HTML元素的语法格式如下：$(“标签名称")例如，捕获所有div元素，代码如下：$("divM)【课堂互动】【教师】提问根据属性捕获HTML元素的语法格式是!十么样的？十【学生】聆听、思考、回答根据属性捕获HTML元素的语法格式与CSS中的属性选择器类似，包括以下几种。(1)$("属性名)：捕获所有具有指定属性的元素,不管属性值是什么。(2)$(”属性名=，值")：捕获属性为指定值的元素。(3)$(”属性名a='值')：捕获属性以值开头的元素。(4)$(”属性名$=，值T')：捕获属性以值结尾的元素。(5)$(”属性名*=，值T')：捕获属性包含值的元素。【示例5-1-1】在HTML文档头部添加<script>标签，编辑代码如下：<script>$(function()S("divclass-p").css("border":"5pxgroovered"I)；)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示效果：捕获class属性值为Pl的所有div元素,并设置其边框属性。【高手点拨】"$(SeleCtOr).css();"表示为捕获的元素设置CSS样式。【示例5-1-2在HTML文档头部添加scrips标签，编辑代码如下：<script>S(funclion()$("divclass*='o'").css("background":"IightyenOw")；I)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：捕获class属性值包含字符。的所有div元素，并设置其背景颜色。【课堂互动】十【教师】提问根据元素的位置捕获HTML元素的语法格式是什么样的？十【学生】聆听、思考、回答根据元素的位置捕获HTML元素，其语法格式与CSS中的伪元素类似，包括以下几种。(1)$("selector:first"):捕获第一元素。(2)S("selector:last")：捕获最后一个元素。(3)$("SeIeCtOr:odd“):捕获索引值为奇数的元素.(4)$(-selector:even")：捕获索引值为偶数的元素。(5)$(nselector:eq(n)")：捕获索引值为n元素.(6)$("selector:gt(n)")：捕获索引值大于n元素。(7)$("selector:lt(n)")：捕获索引值小于n元素。【示例5-1-3在HTML文档头部添加(scrips标签，编辑代码如下：<script>S(function()$("tr:odd").css("background":"lightblue")；)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：捕获表格中所有奇数行，并设置其背景色。【示例5-1-4在HTML文档头部添加<scrip>标签，编辑代码如下：<script>S(function()$(".menu:firsiH).css("color"f,red");)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示效果：捕获第一个类名为menu的元素，并设置其文本颜色。根据后代选择器捕获HTML元素，其语法格式与CSS中的后代选择器类似，代码如下：$("选择器1选择器2”)【示例5-5】编辑HTML文档<body>标签的内容，代码如下：<body><ulid="zhixia"class="firsl">直辖市<li>北京<li>vi>天津vli><li>±,<i><li>重庆<网><ul><ulid="huabei"class="first">tE<li>内蒙古<"i><li>河北vli><li>山西<br><ul>(详见教材)在文档头部添加<“yle>标签与<scripl>标签，编辑代码如下：<style>.first(width:2(X)px;height:auto;float:left;margin-left:30px:<style><script>$(function()$("#huabeili").css("margin-top":"10px")<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“后代选择器示例运行结果”图片(详见教材)，并讲解效果：捕获id属性值为huabei的元素，为其所有后代元素中的Ii元素设置10px的顶端外洒瓦根据子代选择器捕获HTML元素，其语法格式与CSS中的子代选择器类似,代码如下：$("选择器1>选择器2")【示例5-1-6将【示例5-1-5中的<script>标签代码修改为：<script>S(function()$("#huabei>li").css("margin-top":"10px")；)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“子代选择器示例运行结果”图片(详见教材)，并讲解效果：捕获id属性值为huabei的Ul元素，为其直接子元素中的Ii元素设置IOpx的顶端外边距，而二层子元素的顶端外边距不变。5.1.2 创建HTML元素【课堂互动】十【教师】提问HTML的主要功能有哪些？十【学生】聆听、思考、回答使用JQuery创建HTML元素的语法格式如下：VarHTML元素对象名称=$("HTML标签代码")；【示例5-1-7在HTML文档头部添加<script>标签，编辑代码如下：<script>S(function()varbox=S("<divclass='box'xdiv>");box.appendTo(,body,);)<script>【教师】组织学生分组上机完成上面的任务.并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：创建一个类名为box的div元素。【高手点拨】使用JQuery创建HTML元素之后，还必须编辑追加元素对象的代码才能将其添加到页面流中，追加方法将在5.4.4节中详细介绍。5.1.3 获取同类名元素的下标值使用JQUery函数可以非常方便地获取当前被访问元素在同一类名元素中的下标值，能够大大提高选项卡这类交互效果的效率，其语法格式如下：>»varindex=$(this).index(".类名'')；【示例5-1-8】在HTML文档<body>标签内添加6个类名为select-title的div元素，并设置基本样式。【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师迸行点评，并讲解代码然后在HTML文档头部添加<scripl>标签，编辑代码如下：<script>$(function()S(".select-title").click(function()varindex=$(this).index(".select-title");alert(index);)；D<script>效果：在浏览器中打开网页，网页标题显示“我的第一个网页“，网页内容显示“我的段落"。【高手点拨】(1)CIiCkO是JQuery中的鼠标事件函数，鼠标单击对应元素后，即会执行其中设置的事件代码。(2)alert。能够弹出一个带有指定消息和确定按钮的警告框,该消息可以是字符串，也可以是通过JQuery获取的内容。【学生】聆听、记录、理解头脑风暴(8min)【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何创建表格，并捕获表格中所有奇数行，设置其背景色。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入(5min)【教师】提出以下问题在JQUery中如何设置及获取HTML相关内容或属性?【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(25min)5.2JQuery设置及获取HTML相关内容或属性【教师】讲解JQUery获取及设置元素内容、文本、属性等内容5.2.1 设置及获取文本text。IeXIo既可以设置HTML元素的文本,也可以获取它。将HTML元素的文本设置为指定字符串的语法格式如下：元素对象iext("字符串")；【示例5-2-1编辑HTML文档<body>标签的内容，代码如下：<body>通过教师讲解、课堂互动、演示操作等方式，让学生熟悉JQUery的设置及HTML相关内容或属性的获取，了解JQuery设置HTML元素CSS样式的具体方法<divid="box"><san>我的中国心<span><div><body>在HTML文档头部添加<scripi>标签,编辑代码如下：<script>S(function()Varbox=$("#box");box.iexl("我的爱国心”)；)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：id属性值为box的div元素文本被修改为"我的爱国心"。获取HTML元素文本的语法格式如下：元素对象iexi()；【示例5-2-2将【示例5-2-1中scrips标签修改为如下代码：<script>S(function()varbox=$("#box");alert(box.iext();I)<script>在HTML文档头部添加<script>标签，编辑代码如下：<scrip>S(function()varbox=S("#box");box.exi("我的爱国心”)：)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：弹出警告框，显示id属性值为box的div元素文本，即"我的中国心".5.2.2 设置及获取内容html()【课堂互动】【教师】提问html()与text()有哪些异同点？÷【学生】聆听、思考、回答html()与text。类似，都可以设置HTML元素的文本，但它们在获取内容时功能有所区别。text。只能获取文本，而MmlO能够获取所有HTML内容。使用html()设置HTML元素文本的语法格式如下：元素对象html(“字符串”)；【示例5-2-3将【示例5-2-1中<script>标签修改为如下代码：<script>$(function()varbox=$("#box");box.html(“我的爱国心”)；!)<script>效果：与示例521效果相同。使用html()获取HTML元素HTML内容的语法格式如下：元素对象hlml()【示例5-2-4】将【示例5-2-1中<scrip>标签修改为如下代码：<script>$(function()varbox=$("#box");alert(box.html();)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：弹出警告框,显示id属性值为box的div元素的HTML内容,即"<span>我的中国心<span>"°5.2.3 设置及获取属性attr()altr()能够为元素对象设置属性，也能瞬取元素对象指定属性的值。为HTML元素设置属性的语法格式如下：元素对象Htr(”属性名称”属性的值”)；【示例5-2-5编辑HTML文档<body>标签的内容，代码如下：<body><inputtype="text'rname="userName"ValUe="请输入用户名"id="inputl"><body>在HTML文档头部添加<script>标签，编辑代码如下：<script>$(function()varinput1=$("#input1");input1.attr("type",password");)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：文本框的IyPC属性值被修改为password,即文本框中的文本以黑色圆点显示。获取HTML元素指定属性值的语法格式如下：元素对象aur(”属性名称“)【示例5-2-6将【示例5-2-5中<script>标签修改为如下代码：<script>$(function()varinput1=$("#input1");alert(inut1.atir("type");)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：弹出警告框，显示文本框的type属性值，即"text"。5.2.4 设置及获取窗口滚动条顶端位置SCrOnTOPo如果页面的内容超出了可视范围，页面会自动显示窗口滚动条，用于滑动屏幕浏览内容。SCrOHToPO就是设置滚动条位置的方法,它能够设置及获取竖向窗口滚动条距离窗口顶端的位置。设置窗口滚动条顶端位置的语法格式如下：$(WindOW).scro11Top(数值)：其中，数值一般为正整数，单位为px.【示例5-2-7在页面中添加一个超过页面大小的div元素，以显示窗口滚动条。在HTML文档头部添加<scripl>标签,编辑代码如下：<script>S(function()$(WindOW).scro11Top(300);1)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中的窗口滚动条处于距离页面顶端3(X)px处.获取窗口滚动条顶端位置的语法格式如下：S(window).scrollTop();其中，获取到的数值单位为p【示例5-2-8在页面中添加一个超过页面大小的div元素，以显示窗口滚动条。继续在<body>标签中编辑如下代码：<inputIyPe="bmon"value="顶端位置"onclick="alert($(WindOw).scrollTop();">【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：滚动鼠标移动窗口滚动条，单击"顶端位置"按钮，弹出警告框，显示当前窗口滚动条顶端位置的数值。5.2.5 获取窗口宽度Width()与高度height()获取窗口宽度的语法格式如下：$(WindOW).widlh():其中，获取到的数值单位为p获取窗口高度的语法格式如下：$(WindoW).height。；其中，获取到的数值单位为px.【学生】聆听、记录、理解5.3JQuery设置HTML元素CSS样式【教师】讲解隐藏和显示元素、设置HTML元素的CSS样式等内容5.3.1 隐藏和显示元素在JQUery中，隐藏和显示元素的方法有很多种,使用这些方法的语法格式如下：元素对象.方法名称0：【课堂互动】【教师】提问在JQUery中,隐藏和显示元素的方法有哪些？÷【学生】聆听、思考、回答(1)隐藏元素hide()：隐藏指定的元素对象。【示例5-3-1】将【示例5-2-1中<script>标签修改为如下代码：<script>$(function()varbox=$("#box");box.hide();)<script>效果：id属性值为box的元素被隐藏。(2)显示元素show()：显示指定元素对象。(3)淡入fadeln()：淡入指定元素对象。(4)淡出fadeut()：淡出指定元素对象。(5)淡入淡出切换fadeToggle():切换元素对象的淡入淡出效果。(6)渐变到指定透明度fadeTo()：元素对象按照指定时间曲线渐变为指定透明度，完成后执行CalIbaCk回调函数。使用该方法的语法格式如下：S(selecior).fadeTb(speed.opacily,calIback);(7)向下滑动SlideDownO：向下滑动指定元素对象。(8)向下滑动SlideUpO:向上滑动指定元素对象。(9)向上向下滑动切换SlideTogle():切换元素对象的向上向下滑动效果。53.2设置HTML元素的CSS样式css()方法能够设置HTML元素的CSS样式，语法格式如下：元素对象css(”属性名称I":“属性值1”.”属性名称2”:“属性值2",.”属性名称n":“属性值n");【示例5-3-2将【示例5-2-1中<scrip>标签修改为如下代码：<script>$(function()varbox=$("#box");box.css("width":',300px","height":''200px"."background":"red"I)；!)<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：为id属性值为box的元素设置CSS样式。【学生】聆听、记录、理解上机操作(10min)【教师】组织学生分组讨论，上机完成以下任务在创建的course.html文件中，设置弹出警告框，显示id属性值为box的div元素文本“我的课程"。在页面中添加一个超过页面大小的div元素，以显示窗口滚动条。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了JQuery捕获及创建HTML元素JQuery获取及设置元素内容、文本、属性，以及JQuery设置HTML元素的CSS样式等内容，希望通过本节课的讲解，大家可以对Query有所认识和了解，同时掌握JQuery的基本使用方法.【学生】总结回顾知识点总结知识点，IH固学劳寸JQUery捕获及创建HTML元素、设置及获取HTML相关内容或属性，以及设置HTML元素的CSS样式等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的IeXl()、html()xatlK)、scrollTop()等函数进行设计，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课效果不错，激发了学生的学习兴趣，引导学生个体不断探究。教学中，教师主要是鼓励学生主动参与活动并获取积极的体验，引导学生主动提出解决问题的途径，教师要成为学生学习的组织者、参与者、帮助者、引导者、促进者。
