网页设计与制作——JavaScript+jQuery标准教程 教案 第9章 jQuery的工具函数.docx

《网页设计与制作——JavaScript+jQuery标准教程 教案 第9章 jQuery的工具函数.docx》由会员分享，可在线阅读，更多相关《网页设计与制作——JavaScript+jQuery标准教程 教案 第9章 jQuery的工具函数.docx（8页珍藏版）》请在第一文库网上搜索。

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号9授课日期月日月日月日月日授课班级课内教学内容：第9章jQuery的工具函数课外学习任务：(1)课前：以小组为单位，讨论jQuery框架工具函数的相关知识并以PPT的形式记录下来。(2)课后：实现将数组vararray=1,2,3,4,5,6依次输出到页面中。实现清理用户输入字符串的首尾空格并将结果输出到页面。教学目标：知识目标 掌

2、握数组操作函数。 掌握字符串操作函数。 掌握测试操作函数。 掌握函数扩展操作函数。掌握其他工具函数。能力目标 能够掌握jQuery框架工具函数的使用；素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握jQuery框架工具函数的使用，理解并应用专业知识。重点难点及解决方法：（I）重点：jQuey框架工具函数解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解HighChartS框架和VueJs框架的应用，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌握Highcharts框架和Vuejs框架的使用；培养学生的思维能力和分析问题解决问题的能力。（2）难

3、点：模拟用户注册和登录解决方法：通过案例解析+启发式教学讲解的方式，细致讲解使用JQuery工具函数实现模拟用户注册和登录。帮助学生掌握jQuery工具函数的使用方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价

4、和教师评价相结合的方式。课后小结：填表说明：I.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应白选项打“7”。课内教学内容及过程时间分配方法及手段【导引示例】jQuery提供了十分丰富的工具函数，这些工具函数主要用于数据操作。例如，使用jQuery的数组操作函数对数组元素进行批量操作。1工具函数概述与数组操作【工具函数概述】工具函数是依附于jQuery对象的函数，所以在调用工具函数时需要先获取jQuery对象。工具函数的调用语法如下所示。$.函数名（参数列表）或jQuery.函数名（参数列表）其中，$表示jQuery的函数，函数名用于指定具体的工具函数。工具函数可以根据功能以

5、及处理的对象不同分为数组操作函数、字符串操作函数、测试操作函数、函数扩展操作函数、队列操作函数以及其他工具函数。【获取数组元素】获取数组元素可使用3个工具函数，分别为$.each()函数、$.grep()函数和$.inArrayO函数。1. $.each()函数$.each()函数用于遍历指定数组或对象，它会对元素或对象迭代访问，依次读取数组或对象的值，其语法形式如下所示。$.each(object,function(参数1,参数2)()其中，Objec1表示要遍历的数组或对象；function用于指定遍历过程中重复执行的函数；参数1用于获取数组的索引以及对象的key值，因此，当ObjeC1为

6、数组时，参数1通常为index,当ObjeCt为对象时，参数1通常为key；参数2用于存放数组元素或对象的值，一般默认为Va1Ue。2. $.grep()函数通过$.grep()函数可以使用指定的函数过滤数组或类数组对象中的元素，并返回过滤后的数据，在整个过滤过程中不会影响到原数组，其语法形式如下所示。$.grep(airay,ftmction(参数1,参数2),invert)其中，array表示要过滤的原数组；func1ion表示实现过渡数据的函数；参数1用于存放过滤数组元素时的元素值；参数2用于存放过滤数组元素时元素的索引；invert用于控制是否翻转过滤的数据，其默认值为fa1se,如果

7、设置为true,则表示翻转过滤的数据。例如，选择数组中的奇数，如果设置invert为IrUe,则会返回数组中的所有偶数。3. $.inArray()函数使用$.inArray()函数可以在数组中查找指定元素并返回它的索引值，如果没有指定元素，则返回-1,其语法形式如下所示。S.inArray(va1ue,array,from1ndex)其中，va1ue表示要查询的元素；array表示要查询的原数组；from1ndex表示是否从指定数组的指定索引位置开始查询，默认值为0。【数组操作】数组操作函数包括$.makeArray()函数、$.map()函数、$.merge()函数和$.UniqUeSOr

8、t()函数。1. $.makeArray()函数使用$.makeArray()函数可以将类数组对象转换为真正的数组对象，其语法形式如下所示。$.makeArray(object)其中，ObjeCt表示要转换为数组的类数组对象。2. $.map()函数使用$.m叩()函数可以对指定数组中的每个元素或对象的每个属性进行处理，并将处理结果封装为新的数组返回，其语法形式如下所示。$.map(object,ca11back)其中，ObjeCt表示要处理的数组或对象，CaHbaCk表示处理数据时重复执行的函数。3. $.merge。函数使用$.merge()函数可以将两个数组合并为一个数组，其语法形式如下

9、所示。$.merge(first,second)其中，first表示表示第一个数组，SeCond表示第二个数组。4. $.UniqUeSOrt()函数使用$.UniqUeSOrt()函数可以对DOM元素数组中的元素进行排序，并删除重复的元素。该函数只能对普通的DoM元索数组进行操作，不能对数字或字符串数组进行操作，其语法形式如下所示。$.uniqueSort(array)其中，array表示要进行排序的DOM元素数组。【案例分析9-1】将数组数据添加到表格中网页中的大量数据，如用户信息、商品信息等，通常使用表格展示。本案例使用工具函数将指定的数据依次添加到对应的表格中。2.字符串操作函数【字符

10、串空格处理】使用$.trim()工具函数可以删除字符串两端的空白字符、制表符和换行符。如果这些内容在字符串中间，则不会被删除。其语法形式如下所示。$.trim(str)其中，str表示要处理的字符串。【JSON字符串格式处理】使用$.ParSeJSoN()工具函数可以将标准格式的JSON字符串转换为对应的JavaScript对象，其语法形式如下所示。S.parseJSON(json)其中，json表示要转换为JaVaSCriPt对象的JSON字符串。【案例分析9-2】登录数据处理在用户登录过程中，默认会将登录数据前端和后端的空格删除，以方便对账户的管理。本案例使用工具函数将用户输入内容的前后空

11、格删除。3.测试操作函数【判断对象是否为空】$.isEmptyObject()工具函数用于判断对象是否为空，也就是判断对象是否具有属性。这里的对象是指JaVaSCriPt中的标准对象。该函数的语法形式如下所示。$.isEmptyObject(object)其中，ObjeCt表示要判断的对象。【判断参数类型】在使用函数或方法的过程中，参数传递是十分常见的。为了确认参数符合要求，需要在传递前确定参数的类型。jQuery工具函数具有参数类型判断功能。这些工具函数的具体功能说明如下。 S.isFunction(parameter)：判断指定参数是否是函数，parameter表示要判断的参数。 S.is

12、Numeric(parameter)：判断指定参数是否是数值，parameter表示要判断的参数。 SjsP1ainObject(Parameter)：判断指定参数是否是纯粹的对象，parameter表示要判断的参数。 S.isWindow(parameter)：判断指定参数是否是window对象，parameter表示要判断的参数。 S.isArray(parameter)：判断指定参数是否是数组，Parameter表示要判断的参数。【案例分析9-3】判断参数的类型不同类型的数据用于表达不同的内容，例如，姓名需要使用字符串表达，年龄需要使用数值表达，大量连续数据可以使用数组表达。另外，不同类

13、型的数据只有出现在正确的地方才能保证代码的正确运行。本案例使用工具函数对不同参数的类型进行判断。4 .函数扩展【合并对象函数】使用$.extend()工具函数可以将多个对象合并为一个目标对象。该函数的语法形式如下所示。$.extend(deep,target,object1,objectN)其中，de叩为可选项，表示是否深度合并对象，默认值为fa1se。如果将deep设置为true,该函数会依次合并对象的属性。也就是说，如果某个对象的属性是一个对象，那么子对象的属性也会被合并，这也就是深度合并对象。target表示目标对象，其他对象的属性都被合并到该对象上。如果只为该函数指定一个参数，则tar

14、get默认为jQuery对象本身，此时可以为全局对象jQuery添加新的函数。Object1表示要合并的第1个对象,ObjectN表示要合并的第N个对象。该函数可以将多个对象作为一个对象进行处理，当目标对象属性与合并对象属性名称相同时，合并对象属性会覆盖目标对象属性。【扩展属性和方法函数】使用$.fn.extend()工具函数可以为jQuery对象扩展一个或多个实例属性和方法，其语法形式如下所示。$.fn.extend(object)其中，ObjeCI表示要扩展的属性或方法。$.fn是jQuery的原型对象，exiend()函数用于为jQuery的原型对象添加新的属性和方法，新增的方法可以在j

15、Query实例对象上进行调用。【案例分析9-4】扩展一个求和方法$.extend()工具函数不但可以合并对象属性，还可以为jQuery全局对象扩展方法。本案例通过$.extend()工具函数扩展方法，实现根据用户输入数据求和。5 .其他工具函数【元素操作函数】元素操作函数可以用于判断元素之间的关系，为元素添加数据以及获取元素中的临时数据。元素操作的工具函数包括$.COntainS()函数、$.data()函数和$.hasData()函数。1. $.COntainSo函数$.ContainS()工具函数用于判断一个DOM元素是否是另一个DOM元素的后代，如果是，则返回true,否则返回fa1se。其语法形式如下所示。$.contains(container,contained)其中，container表示要判断的祖先元素，contained表示要判断的后代元素。2. $.data()函数使用$.data()工具函数可以在指定的元素上临时存储数据，并返回设置