《web前端技术》(赵敏)003-0教案 第28课 jQuery操作元素和jQuery事件处理

PAGE1PAGE1PAGE2PAGE2

课题第28课jQuery操作元素和jQuery事件处理课时2课时（90min）教学目标知识技能目标：熟悉jQuery对网页元素进行的操作熟悉jQuery的事件处理素质目标：（1）提高自我学习能力，增强自信心（2）培养良好的学习方法，增强举一反三的能力教学重难点教学重点：jQuery对网页元素进行的操作教学难点：jQuery的事件处理教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（30min）→课堂练习（10min）第2节课：→传授新知（35min）→课堂小结（3min）→作业布置（5min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，把和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务了解jQuery操作元素【学生】完成课前任务通过课前任务，让学生提前了解jQuery操作元素，为课堂上学习相关知识点做准备考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出问题jQuery可以对网页元素进行的操作有哪些？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识jQuery提供了许多操作网页元素的方法，这些方法比JavaScript中操作网页元素的方法更加方便灵活。jQuery可以对网页元素进行的操作包括操作元素的内容和值、操作DOM节点、操作元素属性、操作元素的CSS样式。通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（30min）13.3jQuery操作元素【教师】讲解jQuery操作元素，展示相应的表格辅助讲解13.3.1操作元素的内容和值元素的内容是指定义元素的起始标签和结束标签中间的内容，它又可以分为文本内容和HTML内容。文本内容只包含元素的文本内容，不包含元素的子元素；HTML内容不仅包含元素的文本内容，还包含元素的子元素。例如，代码<div><p>内容</p></div>中div元素的文本内容是“内容”，HTML内容是“<p>内容</p>”。元素的值是元素的一种属性，大部分元素的值都对应value属性。【教师】展示表“操作元素内容和值的方法”并讲解内容…（详见教材）13.3.2操作DOM节点JavaScript可以操作DOM节点，如查找节点、创建节点、插入节点、删除节点、复制节点和替换节点等，只是实现方法比较复杂。jQuery为了简化开发工作，提升工作效率，也提供了操作DOM节点的方法。其中，查找节点可以通过jQuery提供的选择器轻松地实现。下面详细介绍jQuery操作DOM节点的其他方法。1．创建节点创建节点主要包括两步，第一步是创建新元素；第二步是将新元素插入文档（父元素）中。例如，使用以下代码在网页文档的boby元素中创建一个新的段落节点。…（详见教材）【课堂拓展】在创建节点时，无论添加的内容是否为使用html()方法指定的HTML内容，浏览器都会将它视为HTML内容进行解析执行。2．插入节点在创建节点时，大家可以发现，使用append()方法能够将定义的节点内容插入指定的元素中。实际上，append()方法就是用于插入节点的方法，除了该方法，jQuery还提供了许多其他方法。在jQuery中，插入节点的方法又分为在元素内部插入节点和在元素外部插入节点两种。其中，在元素内部插入节点就是向一个元素中添加子元素的内容；在元素外部插入节点就是向元素之前或之后添加内容。【教师】展示表“插入节点的方法”并讲解内容…（详见教材）3．删除、复制和替换节点在实际开发过程中，除了需要创建、插入节点外，还经常需要删除、复制和替换节点。jQuery提供了有关删除、复制和替换节点的方法，【教师】展示表“删除、复制和替换节点的方法”并讲解内容…（详见教材）13.3.3操作元素属性除了操作元素内容和值，以及DOM节点的方法外，jQuery还提供了操作元素属性的方法，【教师】展示表“操作元素属性的方法”并讲解内容…（详见教材）13.3.4操作元素的CSS样式jQuery还提供了操作元素CSS样式的方法，【教师】展示表“操作元素CSS样式的方法”并讲解内容…（详见教材）【学生】聆听、记录、理解、观看效果通过教师的讲解和演示例子，使学生掌握jQuery操作元素的相关知识课堂练习（10min）【教师】在多媒体上展示以下习题，让学生做一下习题，有问题可互相讨论或咨询老师1.当DOM加载完成后要执行的函数，下面哪个是正确的?(C)A、jQuery(expression,[context])B、jQuery(html,[ownerDocument])C、jQuery(callback)D、jQuery(elements)2.下面哪一个是用来追加到指定元素的末尾的?(C)A、insertAfter()B、append()C、appendTo()D、after()3.如果需要匹配包含文本的元素，用下面哪种来实现?(B）A、text()B、contains()C、input()D、attr(name)4.如果想要找到一个表格的指定行数的元素，用下面哪个方法可以快速找到指定元素?(C)A、text()B、get()C、eq()D、contents()5.在jquey中，如果想要从DOM中删除所有匹配的元素，下面哪一个是正确的?(C)A、delete()B、empty()C、remove()D、removeAll()6.在jquery中，想要给第一个指定的元素添加样式，下面哪一个是正确的?(D)A、firstB、eq(1)C、css(name)D、css(name,value)7.在jquery中，如果想要获取当前窗口的宽度值，下面哪个是实现该功能的?(A)A、width()B、width(val)C、widthD、innerWidth()8、下面哪几种是属于jquery文档处理的?(ABCD)A、包裹B、替换C、删除D、内部和外部插入9、下面哪种不属于jquery的筛选?(B)A、过滤B、自动C、查找D、串联10、以下方法中，可以操作元素文本内容的是（A）。A、text()B、html()C、val()D、append()、做题、讨论【教师】集中学生出错的题目，进行讲解通过课堂练习，检测学生对本节课知识的掌握，让学生查漏补缺，巩固知识第二节课问题导入（2min）【教师】提出问题事件是完成页面与用户之间动态交互必不可少的因素。jQuery有哪些事件处理机制？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（35min）13.4jQuery的事件处理【教师】讲解jQuery的事件处理，并演示例子辅助理解13.4.1页面加载响应事件$(document).ready()方法是事件模块中最重要的一个方法，它极大地提高了Web页面的响应速度，其语法格式如下：…（详见教材）【课堂拓展】$(document).ready()方法的语法格式可以简写为：…（详见教材）在jQuery中，可以使用$(document).ready()方法代替JavaScript中传统的window.onload()方法，不过两者之间存在细微的差别，主要表现在以下两方面。（1）在一个页面中可以无限制地使用$(document).ready()方法，各方法之间并不冲突，且它们按照代码顺序依次执行；而在一个页面中只能使用一个window.onload()方法。（2）$(document).ready()方法是在所有DOM元素已经完全就绪之后才会被调用，不包括关联的文件；而window.onload()方法是在一个文档完全下载到浏览器时（包括所有关联的文件）才会被响应。13.4.2jQuery中的事件在实际开发中，只有页面加载显然不能满足用户与网页间的动态交互的需求，程序在某些时候还需要完成某些事件，如鼠标单击事件、失去焦点事件等。【教师】展示表“用于事件处理的方法”讲解内容…（详见教材）selector表示被选元素；function表示当事件发生时运行的函数，事件处理程序就写在该函数中。若省略该函数，不同的事件处理方法仅表示触发对应的事件。…（详见教材）13.4.3事件绑定页面加载完毕后，程序可以通过为元素绑定事件完成相应的操作。在jQuery中，事件绑定通常分为3种情况，分别为为元素绑定事件、移除绑定和绑定一次性事件处理。1．为元素绑定事件在jQuery中，使用bind()方法为被选元素绑定一个或多个事件处理程序，并规定事件发生时运行的函数，其语法格式为：…（详见教材）selector表示被选元素；event是必选项，表示绑定到元素的一个或多个事件，事件必须是有效的，多个事件之间用空格分隔；data是可选项，表示传递到函数的额外数据；function是必选项，表示当事件发生时运行的函数。该方法的语法格式还可以使用以下格式：…（详见教材）【例13-1】为元素绑定事件，初始页面效果和触发不同事件后的页面效果…（详见教材）2．移除绑定在jQuery中，使用unbind()方法移除被选元素的事件处理程序，其语法格式为：$(selector).unbind(event,function)其中，selector表示被选元素；event是可选项，表示删除元素的一个或多个事件，多个事件之间用空格分隔；function是可选项，表示从元素的指定事件取消绑定的函数名。…（详见教材）【例13-2】在例13-1中“$("button").bind("click",function(){$("p").slideToggle();});”代码后面添加以下代码，移除为按钮绑定的单击事件。$("button").unbind("click");//移除为按钮绑定的单击事件3．绑定一次性事件处理在jQuery中，使用one()方法为被选元素绑定一个或多个事件处理程序，并规定当事件发生时运行的函数，其语法格式为：$(selector).one(event,data,function)…（详见教材）【例13-3】绑定一次性单击事件，将例13-1中绑定单击事件的bind()方法修改为one()方法（以下提供部分代码），用户第一次单击按钮时，p元素的内容隐藏，再次单击按钮，页面无变化，…（详见教材）【学生】通过老师讲解和演示例子，让学生掌握jQuery事件处理的相关知识课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了jQuery事件处理的相关知识。通过本节课的学习，学生应重点掌握以下内容。（1）jQuery可以对网页元素进行的操作包括操作元素的内容和值、操作DOM节点、操作元素属性、操作元素的CSS样式。（2）在jQuery中，可以使用$(document).ready()方法实现页面加载。【学生】总结回顾知识点总结知识点，使学生牢固掌握jQuery操作元素和jQuery事件处理的相关知识作业布置（5min）【教师】布置课后作业，讲解做题思路，引导学生思考个人作业：完成以下