jQuery网页特效设计基础教程（慕课版）（第2版）-教案 第10章 jQuery性能优化与技巧.docx

PAGE1

PAGE

第10章jQuery性能优化与技巧

课程名称

jQuery网页特效设计基础教程

项目名称

jQuery性能优化与技巧

任务名称

jQuery性能优化与技巧

课时

2

项目性质

□演示性□验证性□设计性√综合性

授课班级

授课日期

授课地点

教学目标

知识目标

1.掌握jQuery性能优化的方法。

2.掌握jQuery常用技巧的使用。

能力目标

1.能够进行jQuery性能优化的能力。

2.能够应用jQuery常用技巧的能力。

素质目标

1.培养学生持续改进的能力。

2.培养学生灵活应用的能力。

教学内容

1.任务描述

2.任务展示与实现

（1）练习使用常用的jQuery性能优化技术

（2）联系使用jQuery的常用技巧

（2）学生动手操作

3.教师讲解本任务涉及的知识点

4.任务小结

教学重点

1.常用的jQuery性能优化技术

2.jQuery的常用技巧

3.编写jQuery代码

教学难点

1.jQuery的常用技巧

教学准备

1.装有jQuery的电脑

2.教学课件PPT

3.教材：《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社

作业设计

1．使用jQuery实现图片的预加载

2.检测浏览器是否为IE10浏览器

3.切换ID与class

教学过程

教学

环节

教学内容与过程

（教学内容、教学方法、组织形式、教学手段）

课前组织

做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。

课程

说明

【课前说明】

本章主要介绍了jQuery使用过程中常用的性能优化及技巧。使开发人员有效利用jQuery使网站达到最佳性能。

【目的】

使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。

课程

内容

描述

一、关键知识点

（1）定义jQuery变量时，应添加一个$符号到变量前。

（2）有必要时可以在jQuery代码中使用原生的JavaScript函数，这样能获得更好的性能。

（3）经常标准化jQuery代码，可以查询哪个比较慢，然后替换它。可以用Firebug控制台，也可以使用jQuery的快捷函数使测试变得更容易。

（4）如果使用版本比较新的jQuery类库，请使用.on，其他任何方法都是最终使用.on来实现的。

（5）在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。

（6）jQuery中第二快的选择器是tag选择器（如$(head)），因为它直接来自于原生的JavaScript方法getElementsByTagName()。

（7）可以扩展jQuery的$.expr[:]对象，编写适合自己的选择器。

（8）在jQuery中，使用内部函数data()存储信息，性能更好。

（9）通过为HTML添加“JS”的class，可以启用JavaScript，而只有当JavaScript启用时，才可以将整个HTML内容隐藏起来，用jQuery来实现指定的功能（例如：收起某些面板或当用户单击它们时展开）。

（10）通过将jQuery函数绑定到$(window).load事件的方法，可以减少页面载入时的CPU使用率，它会在所有的html（包括iframe）被下载完成后执行。

（11）养成将jQuery对象缓存到变量的习惯。

（12）在jQuery中应该对直接的DOM操作进行限制，遇到这种情况时，可以首先在内存中创建需要的内容，然后更新DOM，因为直接的DOM操作速度很慢。

案例：

1.ID与Class之间转换

$(document).ready(function(){

functioncheckWindowSize(){

if($(window).width()1200){

$(body).addClass(large);

}

else{

$(body).removeClass(large);

}

}

$(window).resize(checkWindowSize);

});

课堂

实训

操作元素样式

替换指定元素

引用Google主机上的jQuery类库

直接给DOM元素添加style标签

总结

评价

通过学习，学生能够掌握jQuery使用过程中常用的性能优化及技巧。

本节课主要运用案例教学法，通过对jQuery使用过程中常用的性能优化及技巧的深入理解，掌握jQuery使用过程中常用的性能优化及技巧的特点及优势，深入探