选择器jqueryfind

传智播客《jQuery前端开发实战教程》教学设计课程名称:jQuery前端开发实战教程授课年级:XXXX年级授课学期:XXXX学年第X学期教师姓名:某某老师201X年XX月XX日课题名称第2章计划学时5学时内容分析在第1章中学习了jQuery的基本使用方式,同时让学生认识到jQuery的使用本质——通过方法的调用实现功能.
例如,通过向$()方法中传入选择器来获取元素.
本章将系统而全面地讲解jQuery选择器的使用.
教学目标及基本要求1、了解jQuery选择器的优势2、掌握jQuery基本选择器的使用3、掌握jQuery层次选择器的使用4、熟悉jQuery过滤选择器的使用教学重点1、jQuery基本选择器的使用2、jQuery层次选择器的使用教学难点过滤选择器教学方式教学采用理论讲解结合案例演示教学过程第一学时(选择器的概念、基本选择器)一、创设情境,导入本章内容教师通过提问的形式,复习上一章中jQuery获取元素的方式.
例如:获取id名为box的元素该如何调用jQuery方法复习原生JavaScript获取元素方式,比较传统方式和jQuery方式.
通过讲解传统获取元素的方式的繁琐性引出使用jQuery方法来获取元素的必要性.
二、进行重点知识的讲解(1)教师提问学生:在css中,如何匹配到指定元素对学生讲解css选择器的作用,让学生理解选择器的概念选择器:通过一定条件选择出目标元素.
(2)教师指出jQuery选择器和css选择器书写格式相似.
对比css选择器,只需要把css选择器作为字符串传入$()方法中,即可获取对应的元素.
(3)教师讲解在css中,通过id、类名、标签名、通配符和并集选择器等选择器匹配到元素的方式,对比讲解jQuery中通过这3个标识获取元素的方式.
指出此3种选择器可以通过:"#"+"id名"、".
"+"类名"、"标签名"获取指定的元素,称为基本选择器.
从外,还可以通过通配符"*"和css中的交集选择器"selector1,selector2"来选择元素,统称为基本选择器.
三、归纳总结,布置作业/随堂练习(1)回顾上课前的学习目标,并对本节课的重要知识点进行总结.
教师通过对比传统方式和jQuery方式获取元素代码让学生明白使用jQuery的方式更加简洁方便.
同时复习基本选择器的使用方式.
(2)使用博学谷系统下发课后作业.
第二学时(层次选择器、【案例】折叠式菜单)一、回顾上节课讲解的知识,导入本节课的知识(1)教师讲解上一课时的课后作业.
(2)回顾上节课所学习的知识,由上一课时知识点引出本课时内容.
教师提问:jQuery中如何通过id、类名、标签名获取元素教师演示折叠式菜单案例效果,继而提出需求:如要完成此案例需要有更精确匹配条件的选择器.
教师提出层级选择器,其能通过层级关系匹配元素.
(3)明确学习目标.
掌握jQuery的层级选择器.
完成折叠式菜单案例.
二、进行重点知识的讲解(1)教师通过文档演示css层级选择器如何匹配元素.
教师通过学生熟悉的css选择器,让学生来理解jQuery层级选择器.
(2)教师将css选择器作为字符串传入$()方法中获取同样元素.
教师可在控制台打印出结果让学生直观观察到获取结果.
(3)教师讲解与jQuery选择器对应的jQuery获取元素方法.
教师可演示将选择器传入方法中之后,能对选择结果作进一步筛选.
同时教师应通过文档演示提醒学生find()方法必须要有选择器作参数,不然该方法获取不到任何元素.
(4)教师讲解"折叠式菜单"案例.
教师先向学生分析文档的结构,并口述业务逻辑;在学生理解业务逻辑之后,将业务逻辑翻译成jQuery代码,在此过程中可运用jQuery的层级选择器快速匹配对应元素.
三、归纳总结,布置作业/随堂练习(1)回顾上课前的学习目标,并对本节课的重要知识点进行总结.
教师带领学生回顾本节课内容,分类总结jQuery中获取子级元素、父级元素、兄弟元素的方式.
(2)使用博学谷系统下发课后作业.
第三学时(基本过滤选择器、可见性过滤选择器、内容过滤选择器)一、回顾上节课讲解的知识,导入本节课的知识(1)教师讲解上一课时的课后作业.
(2)回顾上节课所学习的知识,由上一课时知识点引出本课时内容.
教师带领学生复习上节课层级选择器内容,同时可以指出此时选择条件还比较简单,继而引出本节学习内容,更为复杂的一类选择器:过滤选择器.
(3)明确学习目标.
掌握过滤选择器书写格式.
掌握基本过滤选择器.
掌握可见性过滤选择器.
掌握内容过滤选择器.
二、进行重点知识的讲解(1)教师为学生讲解过滤选择器的作用.
教师可指出,过滤选择器的只能是在之前的选择器之后添加额外条件,在之前选择结果基础上继续匹配元素.
(2)教师首先为学生讲解选择器的书写格式.
教师应注意提醒学生,虽然有些过滤选择器带有"()",但是其仍然是选择器字符串中的一部分.
(3)教师根据书中对应的选择器表格介绍逐个介绍基本过滤选择器的使用.
教师在此过程中通过相应案例,提问学生案例运行结果来加深学生理解(4)教师根据书中对应的选择器表格介绍讲解内容过滤选择器的使用方式.
教师在此过程中可通过相关案例文档,提问学生指定效果的实现代码,让学生即学即用,加深印象.
三、归纳总结,布置作业/随堂练习(1)回顾上课前的学习目标,并对本节课的重要知识点进行总结.
(2)使用博学谷系统下发课后作业.
第四学时(属性过滤选择器、子元素过滤选择器)一、回顾上节课讲解的知识,导入本节课的知识(1)教师讲解上一课时的课后作业.
(2)回顾上节课所学习的知识,由上一课时知识点引出本课时内容.
教师强调学习过滤选择器,重点在于记忆,学生只有需要牢牢记住各个过滤选择器的名称和功能,才能得心应手的使用这些选择器.
教师可表示过滤选择器过滤条件多种多样,引出本章是通过元素的属性和元素的子元素来匹配元素.
(3)明确学习目标掌握属性过滤选择器.
掌握子元素过滤选择器.
二、进行重点知识的讲解(1)教师首先讲述属性过滤选择器使通过属性及其属性值来对元素进行筛选,让学生知晓匹配因素.
(2)教师根据书中对应的选择器表格讲解属性过滤选择器.
其中各个符号的含义,教师要强调学生记忆.
(3)通过教材中的案例,提问学生在不同的选择器下案例的渲染结果.
(4)教师根据书中对应的选择器表格讲解子元素过滤选择器.
教师需要强调子元素过滤选择器不是对前面选择器获得结果的筛选,而是获取前面选择器对应元素的子元素.
三、归纳总结,布置作业/随堂练习(1)回顾上课前的学习目标,并对本节课的重要知识点进行总结.
通过教师书写选择器,提问学生,要求口述选择条件的形式回顾整节内容.
为过滤选择器进行分类,要求学生加强记忆.
(2)使用博学谷系统下发课后作业.
第五学时(表单对象属性过滤选择器、【案例】精品展示)一、回顾上节课讲解的知识,导入本节课的知识(1)教师讲解上一课时的课后作业.
(2)回顾上节课所学习的知识,由上一课时知识点引出本课时内容.
教师通过书写选择器提问要求学生口述含义的方式复习上一课时课程内容.
并通过演示向学生展示,在表单元素中用户输入或选择的项并不固定,所以需要有涉及表单元素的选择器,帮助开发人员选择出相关元素,引出jQuery的表单过滤选择器.
(3)明确学习目标.
掌握关于表单的过滤选择器.
完成精品展示案例.
二、进行重点知识的讲解(1)教师先整体介绍关于表单的过滤选择器,可分为以下两类:通过表单元素的类型筛选元素,通过表单的状态筛选元素.
(2)教师根据书中表单过滤选择器表格逐个介绍表单过滤选择器,并提醒学生认真记忆.
教师注意提醒学生:":input"选择器将要获取表单中所有input、textarea、select和button元素.
":button"选择器将要获取表单中所有button元素和input[type=button]的元素.
(3)教师为学生介绍通过表单元素的状态来进行筛选的表单对象属性过滤选择器.
教师注意提醒学生:":selected"获取的是被选中的option元素,而不是select元素.
(4)教师首先带领学生观察精品展示案例模板文档,分析业务逻辑.
教师为学生分析业务逻辑:两侧的菜单栏分别对应中间的图片,对应关系可通过索引值确立.
(5)教师参考案例源代码,带领学生逐步完成精品展示案例.
三、归纳总结,布置作业/随堂练习(1)回顾上课前的学习目标,并对本节课的重要知识点进行总结.
提问学生关于选择器的问题,强调选择器需要不断地加强记忆.
总结本课时内容,以及本章的重点知识点,让学生对本章内容有整体的认知.
(2)使用博学谷系统下发课后作业.
第六、七学时(上机练习)1、完成教材中折叠菜单案例和精品展示案例.
2、使用博学谷系统中的测试题给学生布置上机练习,或者老师自行安排上机练习.
教学后记