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

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

1、课题第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）一传授新

2、知（30min）一头脑风暴（8min）第2节课：问题导入（5min）一传授新知（25min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解JQUery基本使用方法的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题Jquery具有什么功能

3、？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（30min）5.1JQuery捕获及创建HTML元素【教师】讲解捕获元素、创建HTML元素、获取同类名元素的下标值等内容【多媒体】组织学生扫码播放JQuery的基本使用”视频（详见教材），让学生对这部分内容有一个大致地了解通过教师讲解、课堂互动、演示操作等方式，使学生了解JQUery捕获及创建HTML元素的相关方法JQUery能够捕获HTML元素，其中的捕获机制与在CSS中使用选择器匹配元素相同。此外，JQuery还能创建元素，其创建方式与捕获元素相同，都是使用方法该方

4、法()中通常使用字符串参数，参数包括HTML标签与CSS选择器等。5.1.1捕获元素在JQUery中捕获元素时，捕获不同元素的$()方法，()中字符串参数是不同的.根据id名称捕获HTML元素的语法格式如下：S(#id名称)例如，捕获id名称为A的元素，代码如下：$(#A)根据类名捕获HTML元素的语法格式如下：$(”.类名”)例如，捕获类名为B的元素，代码如下：根据标签名称捕获HTML元素的语法格式如下：$(“标签名称)例如，捕获所有div元素，代码如下：$(divM)【课堂互动】【教师】提问根据属性捕获HTML元素的语法格式是!十么样的？十【学生】聆听、思考、回答根据属性捕获HTML元素的

5、语法格式与CSS中的属性选择器类似，包括以下几种。(1)$(属性名)：捕获所有具有指定属性的元素,不管属性值是什么。(2)$(”属性名=，值)：捕获属性为指定值的元素。(3)$(”属性名a=值)：捕获属性以值开头的元素。(4)$(”属性名$=，值T)：捕获属性以值结尾的元素。(5)$(”属性名*=，值T)：捕获属性包含值的元素。【示例5-1-1】在HTML文档头部添加标签，编辑代码如下：$(function()S(divclass-p).css(border:5pxgrooveredI)；)【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师迸行点评【学生】聆

6、听、上机操作、演示效果：捕获class属性值为Pl的所有div元素,并设置其边框属性。【高手点拨】$(SeleCtOr).css();表示为捕获的元素设置CSS样式。【示例5-1-2在HTML文档头部添加scrips标签，编辑代码如下：S(funclion()$(divclass*=o).css(background:IightyenOw)；I)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：捕获class属性值包含字符。的所有div元素，并设置其背景颜色。【课堂互动】十【教师】提问根据元素的位置捕获HTML元素的

7、语法格式是什么样的？十【学生】聆听、思考、回答根据元素的位置捕获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文档头部添加(sc

8、rips标签，编辑代码如下：S(function()$(tr:odd).css(background:lightblue)；)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：捕获表格中所有奇数行，并设置其背景色。【示例5-1-4在HTML文档头部添加标签，编辑代码如下：S(function()$(.menu:firsiH).css(colorf,red);)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示效果：捕获第一个类名为menu的元素，

9、并设置其文本颜色。根据后代选择器捕获HTML元素，其语法格式与CSS中的后代选择器类似，代码如下：$(选择器1选择器2”)【示例5-5】编辑HTML文档标签的内容，代码如下：直辖市北京vi天津vli,重庆tE内蒙古河北vli山西(详见教材)在文档头部添加标签与标签，编辑代码如下：.first(width:2(X)px;height:auto;float:left;margin-left:30px:$(function()$(#huabeili).css(margin-top:10px)【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上

10、机操作、演示【教师】PPt展示“后代选择器示例运行结果”图片(详见教材)，并讲解效果：捕获id属性值为huabei的元素，为其所有后代元素中的Ii元素设置10px的顶端外洒瓦根据子代选择器捕获HTML元素，其语法格式与CSS中的子代选择器类似,代码如下：$(选择器1选择器2)【示例5-1-6将【示例5-1-5中的标签代码修改为：S(function()$(#huabeili).css(margin-top:10px)；)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“子代选择器示例运行结果”图片(详见

11、教材)，并讲解效果：捕获id属性值为huabei的Ul元素，为其直接子元素中的Ii元素设置IOpx的顶端外边距，而二层子元素的顶端外边距不变。5.1.2 创建HTML元素【课堂互动】十【教师】提问HTML的主要功能有哪些？十【学生】聆听、思考、回答使用JQuery创建HTML元素的语法格式如下：VarHTML元素对象名称=$(HTML标签代码)；【示例5-1-7在HTML文档头部添加标签，编辑代码如下：S(function()varbox=S();box.appendTo(,body,);)【教师】组织学生分组上机完成上面的任务.并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆

12、听、上机操作、演示效果：创建一个类名为box的div元素。【高手点拨】使用JQuery创建HTML元素之后，还必须编辑追加元素对象的代码才能将其添加到页面流中，追加方法将在5.4.4节中详细介绍。5.1.3 获取同类名元素的下标值使用JQUery函数可以非常方便地获取当前被访问元素在同一类名元素中的下标值，能够大大提高选项卡这类交互效果的效率，其语法格式如下：varindex=$(this).index(.类名)；【示例5-1-8】在HTML文档标签内添加6个类名为select-title的div元素，并设置基本样式。【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示

13、完成后教师迸行点评，并讲解代码然后在HTML文档头部添加标签，编辑代码如下：$(function()S(.select-title).click(function()varindex=$(this).index(.select-title);alert(index);)；D效果：在浏览器中打开网页，网页标题显示“我的第一个网页“，网页内容显示“我的段落。【高手点拨】(1)CIiCkO是JQuery中的鼠标事件函数，鼠标单击对应元素后，即会执行其中设置的事件代码。(2)alert。能够弹出一个带有指定消息和确定按钮的警告框,该消息可以是字符串，也可以是通过JQuery获取的内容。【学生】聆听、记录、理解头脑风暴(8min)【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何创建表格，并捕获表格中所有奇数行，设置其背景色。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神