电子商务网页设计与制作
授课教案
学年第学期
学院(部)专业(学部)
课程名称
电子商务网页设计与制作
任课教师
课内形式
理论教学□课内实践口理实一体0习题复习口考核评价□其他活动口
学习量安排
课内：
课外形式
调查分析团小组研讨口实践任务团理论探究口考核评价□汇报展示口其他活动团
课外：
序号
9
授课日期
月日
月日
月日
月日
授课班级
课内教学内容：
第9章jQuery的工具函数
课外学习任务：
(1)课前：
以小组为单位，讨论jQuery框架工具函数的相关知识并以PPT的形式记录下来。
(2)课后：
①实现将数组vararray=[1,2,3,4,5,6]依次输出到页面中。
②实现清理用户输入字符串的首尾空格并将结果输出到页面。
教学目标：
知识目标
•掌握数组操作函数。
•掌握字符串操作函数。
•掌握测试操作函数。
•掌握函数扩展操作函数。
∙掌握其他工具函数。
能力目标
•能够掌握jQuery框架工具函数的使用；
素质目标
•较强的专业知识和自学能力；
•丰富知识结构，提升专业知识；
•掌握jQuery框架工具函数的使用，理解并应用专业知识。
重点难点及解决方法：
（I）重点：jQueι∙y框架工具函数
解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解HighChartS框架和VueJs框架的应用，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌握Highcharts框架和Vuejs框架的使用；培养学生的思维能力和分析问题解决问题的能力。
（2）难点：模拟用户注册和登录
解决方法：通过案例解析+启发式教学讲解的方式，细致讲解使用JQuery工具函数实现模拟用户注册和登录。帮助学生掌握jQuery工具函数的使用方法和技巧。从实用的角度帮助学生提高专业知识。
trim函数用于删除空格
课内教学授课地点：
教学媒体：微课、PPT课件、网页图片、相关教学视频等。
设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。
其它资源：与本次课相关的专业技术论文电子版。
学习效果评价方式：
对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；
对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。
课后小结：
填表说明：I.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应白《选项打“7”。
课内教学内容及过程
时间分配
方法
及手段
【导引示例】
jQuery提供了十分丰富的工具函数，这些工具函数主要用于数据操作。例如，使用jQuery的数组操作函数对数组元素进行批量操作。
1工具函数概述与数组操作
【工具函数概述】
工具函数是依附于jQuery对象的函数，所以在调用工具函数时需要先获取jQuery对象。工具函数的调用语法如下所示。
$.函数名（参数列表）
或
jQuery.函数名（参数列表）
其中，$表示jQuery的函数，函数名用于指定具体的工具函数。工具函数可以根据功能以及处理的对象不同分为数组操作函数、字符串操作函数、测试操作函数、函数扩展操作函数、队列操作函数以及其他工具函数。
【获取数组元素】
获取数组元素可使用3个工具函数，分别为$.each()函数、$.grep()函数和$.inArrayO函数。
1.$.each()函数
$.each()函数用于遍历指定数组或对象，它会对元素或对象迭代访问，依次读取数组或对象的值，其语法形式如下所示。
$.each(object,function(参数1,参数2)())
其中，Objec1表示要遍历的数组或对象；function用于指定遍历过程中重复执行的函数；参数1用于获取数组的索引以及对象的key值，因此，当ObjeC1为数组时，参数1通常为index,当ObjeCt为对象时，参数1通常为key；参数2用于存放数组元素或对象的值，一般默认为Va1Ue。
2.$.grep()函数
通过$.grep()函数可以使用指定的函数过滤数组或类数组对象中的元素，并返回过滤后的数据，在整个过滤过程中不会影响到原数组，其语法形式如下所示。
$.grep(airay,ftmction(参数1,参数2){},invert)
其中，array表示要过滤的原数组；func1ion表示实现过渡数据的函数；参数1用于存放过滤数组元素时的元素值；参数2用于存放过滤数组元素时元素的索引；invert用于控制是否翻转过滤的数据，其默认值为fa1se,如果设置为true,则表示翻转过滤的数据。例如，选择数组中的奇数，如果设置invert为IrUe,则会返回数组中的所有偶数。
3.$.inArray()函数
使用$.inArray()函数可以在数组中查指定元素并返回它的索引值，如果没有指定元素，则返回-1,其语法形式如下所示。
S.inArray(va1ue,array,from1ndex)
其中，va1ue表示要查询的元素；array表示要查询的原数组；from1ndex表示是否从指定数组的指定索引位置开始查询，默认值为0。
【数组操作】
数组操作函数包括$.makeArray()函数、$.map()函数、$.merge()函数和$.UniqUeSOrt()函数。
1.$.makeArray()函数
使用$.makeArray()函数可以将类数组对象转换为真正的数组对象，其语法形式如下所示。
$.makeArray(object)
其中，ObjeCt表示要转换为数组的类数组对象。
2.$.map()函数
使用$.m叩()函数可以对指定数组中的每个元素或对象的每个属性进行处理，并将处理结果封装为新的数组返回，其语法形式如下所示。
$.map(object,ca11back)
其中，ObjeCt表示要处理的数组或对象，CaHbaCk表示处理数据时重复执行的函数。
3.$.merge。函数
使用$.merge()函数可以将两个数组合并为一个数组，其语法形式如下所示。
$.merge(first,second)
其中，first表示表示第一个数组，SeCond表示第二个数组。
4.$.UniqUeSOrt()函数
使用$.UniqUeSOrt()函数可以对DOM元素数组中的元素进行排序，并删除重复的元素。该函数只能对普通的DoM元索数组进行操作，不能对数字或字符串数组进行操作，其语法形式如下所示。
$.uniqueSort(array)
其中，array表示要进行排序的DOM元素数组。
【案例分析9-1】将数组数据添加到表格中
网页中的大量数据，如用户信息、商品信息等，通常使用表格展示。本案例使用工具函数将指定的数据依次添加到对应的表格中。
2.字符串操作函数
【字符串空格处理】
使用$.trim()工具函数可以删除字符串两端的空白字符、制表符和换行符。如果这些内容在字符串中间，则不会被删除。其语法形式如下所示。
$.trim(str)
其中，str表示要处理的字符串。
【JSON字符串格式处理】
使用$.ParSeJSoN()工具函数可以将标准格式的JSON字符串转换为对应的JavaScript对象，其语法形式如下所示。
S.parseJSON(json)
其中，json表示要转换为JaVaSCriPt对象的JSON字符串。
【案例分析9-2】登录数据处理
在用户登录过程中，默认会将登录数据前端和后端的空格删除，以方便对账户的管理。本案例使用工具函数将用户输入内容的前后空格删除。
3.测试操作函数
【判断对象是否为空】
$.isEmptyObject()工具函数用于判断对象是否为空，也就是判断对象是否具有属性。这里的对象是指JaVaSCriPt中的标准对象。该函数的语法形式如下所示。
$.isEmptyObject(object)
其中，ObjeCt表示要判断的对象。
【判断参数类型】
在使用函数或方法的过程中，参数传递是十分常见的。为了确认参数符合要求，需要在传递前确定参数的类型。jQuery工具函数具有参数类型判断功能。这些工具函数的具体功能说明如下。
・S.isFunction(parameter)：判断指定参数是否是函数，parameter表示要判断的参数。
・S.isNumeric(parameter)：判断指定参数是否是数值，parameter表示要判断的参数。
・SjsP1ainObject(Parameter)：判断指定参数是否是纯粹的对象，parameter表示要判断的参数。
・S.isWindow(parameter)：判断指定参数是否是window对象，parameter表示要判断的参数。
・S.isArray(parameter)：判断指定参数是否是数组，Parameter表示要判断的参数。
【案例分析9-3】判断参数的类型
不同类型的数据用于表达不同的内容，例如，姓名需要使用字符串表达，年龄需要使用数值表达，大量连续数据可以使用数组表达。另外，不同类型的数据只有出现在正确的地方才能保证代码的正确运行。本案例使用工具函数对不同参数的类型进行判断。
4.函数扩展
【合并对象函数】
使用$.extend()工具函数可以将多个对象合并为一个目标对象。该函数的语法形式如下所示。
$.extend(deep,target,object1,objectN)
其中，de叩为可选项，表示是否深度合并对象，默认值为fa1se。如果将deep设置为true,该函数会依次合并对象的属性。也就是说，如果某个对象的属性是一个对象，那么子对象的属性也会被合并，这也就是深度合并对象。
target表示目标对象，其他对象的属性都被合并到该对象上。如果只为该函数指定一个参数，则target默认为jQuery对象本身，此时可以为全局对象jQuery添加新的函数。
Object1表示要合并的第1个对象,ObjectN表示要合并的第N个对象。该函数可以将多个对象作为一个对象进行处理，当目标对象属性与合并对象属性名称相同时，合并对象属性会覆盖目标对象属性。
【扩展属性和方法函数】
使用$.fn.extend()工具函数可以为jQuery对象扩展一个或多个实例属性和方法，其语法形式如下所示。
$.fn.extend(object)
其中，ObjeCI表示要扩展的属性或方法。$.fn是jQuery的原型对象，exiend()函数用于为jQuery的原型对象添加新的属性和方法，新增的方法可以在jQuery实例对象上进行调用。
【案例分析9-4】扩展一个求和方法
$.extend()工具函数不但可以合并对象属性，还可以为jQuery全局对象扩展方法。本案例通过$.extend()工具函数扩展方法，实现根据用户输入数据求和。
5.其他工具函数
【元素操作函数】
元素操作函数可以用于判断元素之间的关系，为元素添加数据以及获取元素中的临时数据。元素操作的工具函数包括$.COntainS()函数、$.data()函数和$.hasData()函数。
1.$.COntainSo函数
$.ContainS()工具函数用于判断一个DOM元素是否是另一个DOM元素的后代，如果是，则返回true,否则返回fa1se。其语法形式如下所示。
$.contains(container,contained)
其中，container表示要判断的祖先元素，contained表示要判断的后代元素。
2.$.data()函数
使用$.data()工具函数可以在指定的元素上临时存储数据，并返回设置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。