jQuery网页特效设计基础教程教学教案Word文件下载.docx

1、（2）学生动手操作3. 教师讲解本任务涉及的知识点4. 任务小结教学重点1. JavaScript的应用领域 2. JavaScript的特点 3. 编写JavaScript脚本 教学难点1. 应用Dreamweaver编辑器编写JavaScript程序教学准备1. 装有Dreamweaver的电脑2. 教学课件PPT3. 教材：jQuery网页特效设计基础教程（慕课版）刘刚 人民邮电出版社作业设计1应用Dreamweaver编辑器编写第一个JavaScript程序教学过程 教学环节教学内容与过程（教学内容、教学方法、组织形式、教学手段）课前组织做好课前“5分钟”教学管理（多媒体、实训室），做

2、好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。课程说明【课前说明】分别从JavaScript概述，JavaScript的应用领域、JavaScript的特点、JavaScript的开发工具以及JavaScript的出错类型、JavaScript的调试方式、JavaScript库等JavaScript基础等知识点进行初步的了解。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。内容描述一、什么是JavaScript？从JavaScript的概念展开，介绍JavaScript的应用领域

3、，了解JavaScript的特点。掌握JavaScript是基于对象和事件驱动的解释型脚本语言这一核心概念。二、JavaScript的库？JavaScript库，是指可以方便地应用到现有Web开发体系中的、现成的JavaScript代码资源，包含工具、函数库、约定以及从常用任务中抽象出的可以复用的通用模块，能帮助使用者轻松地建立具有高难度交互特性的富客户端页面，并且兼容各大浏览器。它们通常由开源社区开发和维护，并被各大公司支持和使用。目前流行的JavaScript库有jQuery、Vue、AngularJS、ReactJS、Prototype、Ext JS、Dojo、YUI、MooTools等

4、。三、编写第一个JavaScript程序在HTML中嵌入JavaScript脚本代码可以通过直接嵌入HTML文档、链接外部文件以及通过事件的方式来实现，可以通过案例来说明。案例：1. 通过使用记事本工具来作为JavaScript的编辑器编写第一个JavaScript脚本headtitle一段简单的JavaScript代码script language=javascript window.alert（欢迎光临本网站）;/script/headbodyh3这是一段简单的JavaScript代码。/h3/body/html课堂实训1. 应用Dreamweaver编程JavaScript脚本2. 应用

5、Dreamweaver编辑器编写第一个JavaScript程序总结评价通过学习，学生能够掌握JavaScript的基本特点和应用领域，JavaScript的编写方法。本节课主要运用案例教学法，通过对JavaScript概念的深入理解，掌握JavaScript的特点及应用领域，深入探讨JavaScript脚本编程的方法，通过实例的方法加强对JavaScript编程方法的掌握，达到能够独立熟练运用JavaScript来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式 ，促进学生的自主、创新学习的方式 。第2章 初识jQu

6、ery初识jQuery1. 具备使用安装jQuery并解决冲突的能力2. 具备使用jQuery编写脚本的能力1. 了解什么是jQuery2. 了解jQuery的应用和特点3. 掌握编写jQuery脚本的方法（1）应用jQuery编写弹出一个提示对话框并验证其效果（2）DOM对象与jQuery对象的项目转换1. jQuery的特点 2. jQuery与DOM的区别 3. 编写jQuery脚本 1. 应用jQuery编写脚本1. 装有jQuery的电脑1应用jQuery弹出一个提示对话框分别从jQuery概述，jQuery的应用、jQuery的特点、jQuery的版本以及jQuery与DOM对象的

7、区别、jQuery的插件等知识点进行初步的了解。一、什么是jQuery？从jQuery的概念展开，介绍jQuery的应用，了解jQuery的特点。jQuery是一套简洁、快速、灵活的JavaScript脚本库。二、jQuery对象和DOM对象的区别？DOM是Document Object Model，即文档对象模型的缩写。DOM是以层次结构组织的节点或信息片段的集合，每一份DOM都可以表示成一棵树。jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是独有的，可以使用jQuery里的方法。三、jQuery的插件？分别介绍插件的使用方法及目前流行的插件。1. DOM对

8、象转换为jQuery对象script$（document）.ready（function（） var domObj = document.getElementById（testp alert（使用DOM方法获取p节点的内容：+domObj.innerHTML）; var $jqueryObj = $（domObj）;使用jQuery方法获取p节点的内容：+$jqueryObj.html（）;） 1. 应用jQuery弹出一个提示对话框2. jQuery对象转换为DOM对象通过学习，学生能够掌握jQuery的基本特点、应用、jQuery的编写方法。本节课主要运用案例教学法，通过对jQuery概念

9、的深入理解，掌握jQuery的特点及应用领域，深入探讨jQuery脚本编程的方法，通过实例的方法加强对jQuery编程方法的掌握，达到能够独立熟练运用jQuery来解决实际问题的能力。第3章 使用jQuery选择器使用jQuery选择器51. 具备通过选择器快速定位元素的能力2. 具备使用选择器编写程序的能力1. 了解什么是jQuery选择器2. 了解jQuery选择器的优势3. 掌握基本选择器的用法（1）在页面中通过选择器添加按钮、表单等（2）编程jQuery实现综合实例1. jQuery的基本选择器 2. jQuery选择器的基本语法 1. 在jQuery中通过选择器快速定位元素1应用jQ

10、uery实现表格隔行换色及鼠标指针指向行变色分别从jQuery概述，jQuery的应用领域、jQuery的特点、jQuery的开发工具以及jQuery的出错类型、jQuery的调试方式、jQuery库等jQuery基础等知识点进行初步的了解。一、什么是jQuery选择器？jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法，能够轻松快速地对页面进行设置。jQuery选择器是打开高效开发jQuery之门的钥匙。一个典型的jQuery选择器的语法格式为：$（selector）.methodName（）;二、jQuery选择器的优势与传统的JavaScript获

11、取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下3个方面。 代码更简单。 支持CSS1到CSS3选择器。 完善的处理机制。三、jQuery基本选择器jQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。1.应用jQuery实现获取超级链接地址（1）创建一个名称为index.html的文件，在该文件中应用DIV+CSS样式进行页面布局，并添加4个超级链接，关键代码如下：div style=float:right;text-align: right; a href=index.html首页   | &index1.htm

12、l class=main登录index2.html注册index3.html找回密码（2）在index.html文件的标记中应用下面的语句引入jQuery库。script type=text/javascript src=./js/jquery-3.3.1.min.js（3）在引入jQuery库的代码下方编写jQuery代码，实现绑定鼠标指针移到超级链接事件，通过元素选择器和类名选择器获取超链接地址。具体代码如下： $（a.main）.mouseover（function（） / 绑定鼠标指针移到超级链接事件 var url= $（this）.attr（href / 超链接地址超链接地址是：+

13、url）; ）;）;综合实例：表格隔行换色及鼠标指针指向行变色对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色及鼠标指针指向行变色功能。本实例的需求主要有以下两点。（1）在页面中创建一个表格，令表格奇数行显示黄色，偶数行显示浅蓝色；（2）当鼠标指针指向某一行时，该行颜色随之改变。通过学习，学生能够掌握jQuery选择器的基本特点、优势以及jQuery基本选择器的编写方法。本节课主要运用案例教学法，通过对jQuery选择器概念的深入理解，掌握jQuery选择器的特点及优势，深入探讨jQuery选择器编程的方法，通过实例的方法加强对jQue

14、ry选择器编程方法的掌握，达到能够独立熟练运用jQuery选择器来解决实际问题的能力。第3章 使用jQuery操作DOM使用jQuery操作DOM1. 具备使用jQuery操作DOM中的元素的能力2. 具备使用jQuery操作DOM中的对象的能力1. 了解DOM操作的分类2. 掌握对元素内容、值、属性、CSS样式操作的方法3. 掌握对DOM文档节点操作的用法（1）对元素内容和元素值进行操作（2）在页面中对DOM文档节点进行操作1. 元素内容的操作方法 2. DOM文档节点的操作方法 3. 编写jQuery代码 1. 使用jQuery操作DOM中的元素及对象1应用jQuery实现开心小农场游戏本

15、章主要介绍了DOM操作的分类、jQuery对元素的内容和值的操作方法、jQuery对DOM文档节点的操作方法、jQuery对元素属性的操作方法、jQuery对元素的CSS样式的操作方法等知识点。其中重点介绍了对DOM文档节点的创建、查找、插入、删除、复制、替换、包裹、遍历等。一、DOM操作的分类通常来说，DOM操作分为3方面：DOM Core、HTML-DOM和CSS-DOM。二、使用jQuery操作DOM中的元素及对象通过多个案例讲解jQuery的操作方法，包括jQuery对元素的内容和值的操作方法、jQuery对DOM文档节点的操作方法、jQuery对元素属性的操作方法、jQuery对元素

16、的CSS样式的操作方法等。1. 设置div元素的文本内容（1）创建一个名称为index.html的文件，在该文件的（2）在页面的标记中添加一个元素，令它的文本内容为空。代码如下：（3）在引入jQuery库的代码下方编写jQuery代码，实现为标记设置文本内容。 $（document）.ready（function（）div）.text（我是通过text（）方法设置的文本内容2. 使用each（）方法img遍历元素标记中，使用标签添加5张图片，代码如下：img height=60 src=images/01.jpg width=80 /images/02.jpgimages/03.jpgimag

17、es/04.jpgimages/05.jpg（3）在引入jQuery库的代码下方编写jQuery代码，使用each（）方法遍历img全部图片，给每一张图片添加一个title属性，即鼠标指针移动到图片上面时的提示信息。$（img）.each（function（index） $（this）.attr（title,第+（index+1）+张图片）实现我的开心小农场通过jQuery可以很方便地对DOM节点进行操作，通过“我的开心小农场”实例来说明通过jQuery操作DOM节点的具体应用。（1）在页面中引入农场图片，单击“播种”“生长”“开花”“结果”按钮时，在农场中显示相应效果。（2）在IE 6之前版

18、本的浏览器下，png格式图片有背景，将其处理为透明效果。通过学习，学生能够掌握DOM操作的分类、使用jQuery操作DOM中的元素及对象的方法。本节课主要运用案例教学法，通过对jQuery操作DOM中元素及对象方法的深入理解，掌握jQuery操作DOM中元素及对象方法的特点及优势，深入探讨jQuery操作DOM中元素及对象的编程方法，通过实例的方法加强对jQuery操作DOM中元素及对象方法的掌握，达到能够独立熟练运用jQuery操作DOM来解决实际问题的能力。第5章 jQuery中的事件处理和动画效果jQuery中的事件处理和动画效果jQuery中的事件处理和动画效果41. 具备使用jQue

19、ry处理事件的能力2. 具备使用jQuery实现动画效果的能力1. 掌握基本事件的处理方法2. 掌握基本动画效果的实现方法（1）在页面中通过绑定、捕获、模拟用户事件（2）在页面中实现淡入淡出、滑动、伸缩式导航等动画效果1. jQuery的事件处理 2. jQuery的动画效果 1. 掌握自定义动画效果的实现1应用jQuery实现图片传送带本章主要介绍了事件与动画效果的处理。“事件是脚本语言的灵魂”，事件使页面具有了动态性和响应性。在传统的JavaScript中内置了一些事件响应的方式， jQuery增强、优化并扩展了基本的事件处理机制。基本的动画效果指的是元素的隐藏和显示。在jQuery中提供了两种控制元素隐藏和显示的方法。一、重点知识点（1）$（document）.read