jQuery网页特效设计基础教程--第3章-使用jQuery选择器-教案.docx
-
资源ID：35068374
资源大小：15.75KB
全文页数：4页
- 资源格式： DOCX
下载积分：15金币
快捷下载
会员登录下载
微信登录下载
三方登录下载：
微信扫一扫登录
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
jQuery网页特效设计基础教程--第3章-使用jQuery选择器-教案.docx
第3章使用jQuery选择器课程名称jQuery网页特效设计基础教程项目名称使用jQuery选择器任务名称使用jQuery选择器课时5项目性质演示性 验证性 设计性 4综合性授课班级授课日期授课地点教学目标能力目标：1 .具备通过选择器快速定位元素的能力2 .具备使用选择器编写程序的能力知识目标：1 . 了解什么是jQuery选择器2 . 了解jQuery选择器的优势3 .掌握基本选择器的用法素质目标：4 .培养学生信息搜集能力5 .培养学生团结合作、互帮互助的能力教学内容1 .任务描述2 .任务展示与实现（1）在页面中通过选择器添加按钮、表单等（2）编程jQuery实现综合实例（2）学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结教学重点1. jQuery的基本选择器2. jQuery选择器的基本语法3. 编写jQuery脚本教学难点1.在jQuery中通过选择器快速定位元素教学准备1 .装有jQuery的电脑2 .教学课件PPT3 .教材：jQuery网页特效设计基础教程（慕课版）刘刚 人民邮电出版社作业设计1.应用jQuery实现表格隔行换色及鼠标指针指向行变色教学过程和教学内容与过程（教学内容、教学方法、组织形式、教学手段）织做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开 课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。蝴【课前说明】分别从jQuery概述，jQuery的应用领域、jQuery的特点、jQuery的开发工具以及jQuery的出错 类型、jQuery的调试方式、jQuery库等jQuery基础等知识点进行初步的了解。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目 标。课程内容一、什么是jQuery选择器？jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法，能够 轻松快速地对页面进行设置。jQuery选择器是打开高效开发jQuery之门的钥匙。一个典型的jQuery 选择器的语法格式为：$（selector）. methodN ame（）;二、jQuery选择器的优势与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在 以下3个方面。代码更简单。支持CSS1到CSS3选择器。完善的处理机制。三、jQuery基本选择器jQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选 择器。案例：1.应用jQuery实现获取超级链接地址(1)创建一个名称为index.html的文件，在该文件中应用DIV+CSS样式进行页面布局，并添 加4个超级链接，关键代码如下：<div style=nfloat:right;text-align: right;“><a href=Hindex.htmr,>-JX</a> | <a href="indexl.html" class="main"登录</a> | <a href="index2.html" class="main">注册</a> | <a href="index3.html" class="main",找回密码</a></div>(2)在index.html文件的<head>标记中应用下面的语句引入jQuery库。<script type=ntext/javascriptn src=n./js/jquery-3.3.1 .min.jsnx/script>(3)在引入jQuery库的代码下方编写jQuery代码，实现绑定鼠标指针移到超级链接事件，通 过元素选择器和类名选择器获取超链接地址。具体代码如下：<script ty pe=n text/j avascriptn >$(document).ready(function() $(,'a.main,).mouseover(function()/绑定鼠标指针移到超级链接事件var url= $(this).attr(,'href,); / 超链接地址alert("超链接地址是："+url);)；)；</script>懒综合实例：表格隔行换色及鼠标指针指向行变色实VII对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时， 可以为表格添加隔行换色及鼠标指针指向行变色功能。本实例的需求主要有以下两点。(1)在页面中创建一个表格，令表格奇数行显示黄色，偶数行显示浅蓝色；(2)当鼠标指针指向某一行时，该行颜色随之改变。总结通过学习，学生能够掌握jQuery选择器的基本特点、优势以及jQuery基本选择器的编写方法。诏介本节课主要运用案例教学法，通过对jQuery选择器概念的深入理解，掌握jQuery选择器的特点 及优势，深入探讨jQuery选择器编程的方法，通过实例的方法加强对jQuery选择器编程方法的掌握， 达到能够独立熟练运用jQuery选择器来解决实际问题的能力。教学评价方式以小组为单位，以完成 案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的 自主、创新学习的方式。
