网页设计与制作——JavaScript+jQuery标准教程 教案 第10章 jQuery插件.docx

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

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号14授课日期月日月日月日月日授课班级课内教学内容：第10章jQuery插件课外学习任务：(1)课前：以小组为单位，讨论jQuery插件的相关知识，通过查询的方式了解jQuery常用插件等相关知识并以PPT的形式记录下来。(2)课后：实现点击div元素后变成绿色，然后变成红色的动画效果。实现通过鼠标对div元素进行排序的效果。教学目标

2、：知识目标 掌握jQuery插件基础。 掌握常用jQuery插件。 掌握jQueryU1插件。能力目标 能够掌握多种jQueryUI插件的使用； 能够通过jQueryUI插件实现多种动态效果。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握jQueryUI插件的使用，理解并应用专业知识。重点难点及解决方法：(1)重点：jQueryUI插件的使用解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解DiSCUZ!论坛的安装和维护的相关内容，引导学生积极思考，掌握相应知识；同时通过课堂在线展示，使学生可以更直观的学习DiSCUZ!论坛的安装和维护的相关内容；培养学生的

3、思维能力和分析问题解决问题的能力。(2)难点：菜单效果解决方法：通过示例展示+启发式教学讲解的方式，细致讲解使用jQueryUI插件实现菜单效果。帮助学生掌握jQueryUI插件的使用方法。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生

4、自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：I.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应白选项打“7”。课内教学内容及过程时间分配方法及手段【导引示例】jQuery插件可以帮助开发者轻松实现多种丰富的交互效果。例如，使用弹跳动画切换元素的显示和隐藏状态的效果。1jQuery插件基础jQuery插件概述】jQuery插件是指基于jQuery,以jQuery为核心，开发者或官方编写的有固定功能并且符合一定规范的打包JavaScript应用程序。在使用插件时，开发者只需要调用对应的压缩包即可。jQuery插件可以通过jQuery官网下载，也可以从其他平台获取。

5、开发者还可以将自己编写的插件上传到jQuery官网，分享给更多的开发者使用。jQuery插件的使用方式】jQuery插件的使用包括引入库文件和调用插件两部分。jQuery插件可以通过jQuery官网或对应插件的官网下载，下载的是JS压缩包。引入jQuery插件库压缩包的方式与引入jQuery核心库文件的方式相同，都是在页面文档中添加标签，通过该标签添加对应的插件库文件，语法形式如下所示。引入对应的压缩包之后，就可以通过选择器调用对应的插件实现对应的效果，其语法形式如下所示。$(“选择器”).插件方法()其中，插件方法一般是插件的名称，默认只需要将插件作为jQuery的一种方法直接调用即可。2.

6、常用的jQuery插件Va1idate插件】Va1idate插件最初由杰泽费(JbrnZaefferer)编写和维护，他是jQuery团队的成员、jQueryUI团队的首席开发者和QUnit的维护者。Va1idate插件发布于2006年，之后不断地被更新和改进。2016年2月，Va1idate插件发布1.15.0版。从此，MarkUSStaab接管了该插件的更新和维护工作。Va1idate插件提供了强大的表单验证功能，通过该插件可以轻松实现客户端的表单验证功能。该插件还提供了大量的定制选项，可以满足多种功能需求。Va1idate插件可以通过官方网页或者代码托管网页下载，下载后将其引入HTM1文

7、档中即可使用。Va1idate插件在使用时需要插入两个文件，引入方式如下所示。其中，jquery.va1idate.js文件是Va1idate插件文件。Va1idate插件捆绑的方法都带有默认的英文错误提示消息以及其他37种语言包。messages_zh.js文件就是中文的错误提示语言包。调用Va1idate插件只需要调用Va1idate()方法即可，其语法形式如下所Zjo$(选择器).va1idate()其中，选择器会选中要验证的表单元素。Va1idate()方法中有messages属性和ru1es属性。其中，messages属性可以用于定义对应的验证提示信息，默认的提示信息如下所示。 re

8、quired:这是必填字段”， remote:请修正此字段”， emai1:请输入有效的电子邮件地址”， ur1:”请输入有效的网址”， date:请输入有效的日期”， dateISO:请输入有效的日期(YYYY-MM-DD)”， number:请输入有效的数字”， digits:只能输入数字”， creditcard:“请输入有效的信用卡号码”， equa1To:你的输入不相同， extension:请输入有效的后缀， max1ength:$.VaIidatOr.format(最多可以输入(0)个字符)， min1cngth:$.Va1idatoi.format(最少要输入0个字符)， ra

9、nge1ength:$.VaIidator.format，请输入长度在0）到1）之间的字符串”）， range:$.Va1idaIor.forma1，请输入0到1之间的数值）， max:$.VaIidator.forma1（请输入不大于0的数值）， min:$.Va1idatOr.format（请输入不小于0的数值）通过ru1es属性定义的验证规则如表10.1所示。规则功能reauired:tnie必须输入的字段remote:,check.hpu使用ajax方法调用CheCk.php验证输入值Cmaiktrue必须输入正确格式的电子邮件Uiixrue必须输入正确格式的网址Jateitrue必须

10、输入正确格式的日期dateISO:true必须输入正确格式的日期（ISO）。只验证彳旨式不验E有效性number:true必须输入合法的数字（负数,小数）Ciiffitsztrue必须输入整数creditcard:必须输入合法的信用卡号CGua1Tb:fie1d输入值必须和#fie1d相同accent:输入拥有合法后缀名的字符串max1en2th:5输入长度最多是5的字符串汉字算一个W符IYiin1ensth:10输入长度最小是10的字符串,汉字算一个字符ra0e1enothr5.101输入长度必须介于5和1（）之间的字符串又字算一个字符rance:f5.101输入值必须介于5和10之间max

11、:5输入值不能大于5min:10输入值不能小于10Cookie插件】Cookie是Web服务器在用户计算机创建的一种插件，其保存的信息常用于识别用户。Cookie插件可以辅助jQuery读取、写入和删除CoOkie信息。COOkie插件可以从jQuery官网下载。在使用该插件之前，需要先导入jQuery库文件和Cookie插件文件，代码如下所示。Cookie插件通过Cookie（）方法实现Cookie信息的创建、读取和删除操作。其中，创建CoOkie信息的语法形式如下所示。S.cookie（name,va1ue,expires,path）;其中,name表示创建的Cookie信息的名字;Va1

12、Ue表示要创建的Cookie信息；expires表示Cookie信息的保存时间，如果不设置，则Cookie信息只在浏览器关闭前有效；path表示指定Cookie信息的存储路径，如果需要让一个页面读取另外一个页面的Cookie信息,就需要设置Cookie路径。读取Cookie信息的语法形式如下所示。$.COokie（name）;其中，name用于指定要读取的CoOkie信息的名字。如果不指定该值，则表示读取所有Cookie信息。如果创建时指定了路径，则读取时也需要添加路径属性。删除Cookie信息的语法形式如下所示。S.removeCookie（name）;其中，name用于指定要删除的CoOkie信息的名字。如果不指定该值，则表示删除所有Cookie信息。如果创建时指定了路径，则删除时也需要添加路径属性。如果删除成功就返回true,否则返回fa1se。Grow1插件】GroW1插件可以通过覆盖层显示反馈消息。反馈消息可以是提示消息、错误消息等。这些提示消息会在一段时间后自动消失。GrOW1插件可以通过访问jQueryGrow1官网下载。Grow1插件的使用需要插入jQuery库文件、jquerygrow1.js和jquery.grow1.css这3个文件，插入代码如下所示。GrOW1插件通过grow1()方法调用，该方法可提供4种默认消息，具体如