河南中医药大学：《Web前端开发》课程理论教学课件（2017）14.jQuery插件

jQuery插件 管理科学与工程学科 耿方方

jQuery插件 管理科学与工程学科 耿方方

主要内容 ■ jQuery插件概述 验证插件 Cookie插件 搜索插件 图片灯箱插件 右键菜单插件 图片放大镜插件 jQuery UI插件

主要内容  jQuery插件概述  验证插件  Cookie插件  搜索插件  图片灯箱插件  右键菜单插件  图片放大镜插件  jQuery UI 插件

jQuery插件概述 jQuery插件是以 jQuery的核心代码为基础,编写出符合一定规范的 应用程序。 目前有超过近百种的各类插件被应用到全球的各种项目中。插件的 使用,充分展示了 jQuery中又一核心功能:强大的扩展性

jQuery插件概述  jQuery插件是以jQuery的核心代码为基础，编写出符合一定规范的 应用程序。  目前有超过近百种的各类插件被应用到全球的各种项目中。插件的 使用，充分展示了jQuery中又一核心功能：强大的扩展性

jQuery插件概述 使用方法 插件一般使用时,仅需要包含该插件的JS文件即可,按照如下步骤 即可实现插件的调用: 在页面中导入包含插件的JS文件,并确定它的引用在主 jQuery库之 后,其代码如下所示: Script language=" javascript type="text/javascript src="jquery/jquery. pl. js > 在JS文件或页面JS代码中,使用插件定义的语法进行书写,即可完 成该插件的调用

jQuery插件概述  使用方法  插件一般使用时，仅需要包含该插件的JS文件即可，按照如下步骤 即可实现插件的调用：  在页面中导入包含插件的JS文件，并确定它的引用在主jQuery库之 后，其代码如下所示：    在JS文件或页面JS代码中，使用插件定义的语法进行书写，即可完 成该插件的调用

验证插件 验证插件 validate validate是一个十分优秀的表单验证插件之一,它广泛的使用在全 球各个的项目中,并得到广大Web前端开发者的认可,该插件具有如 下几个功能 自带验证规则:其中包含必填、数字、UR等众多验证规则。 验证信息提示:可以使用默认的提示信息,也可以自定义提示信息, 覆盖默认内容。 ■多种事件触发:不仅在表单提交时触发验证,而且在“ keyup”或者 “blur”事件中也能进行触发。 ■允许自定义验证规则:除使用自带的验证规则外,Web前端开发者还 可以很方便的自定义验证规则

验证插件  验证插件validate  validate是一个十分优秀的表单验证插件之一，它广泛的使用在全 球各个的项目中，并得到广大Web前端开发者的认可，该插件具有如 下几个功能：  自带验证规则：其中包含必填、数字、URL等众多验证规则。  验证信息提示：可以使用默认的提示信息，也可以自定义提示信息， 覆盖默认内容。  多种事件触发：不仅在表单提交时触发验证，而且在“keyup”或者 “blur”事件中也能进行触发。  允许自定义验证规则：除使用自带的验证规则外，Web前端开发者还 可以很方便的自定义验证规则

验证插件 验证插件 validate 该插件是由 Jorn Zaefferer编写和维护的,他是 jQuery团队的 名成员,是 jQuery UI团队的主要开发人员,是 QUnit的维护 人员。该插件在2006年 jQuery早期的时候就已经开始出现,并 直更新至今。目前版本是1.17.0。 访问 jQuery Validate官网,下载最新版的 jQuery Validate插 件

验证插件  验证插件validate  该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的 一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护 人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并 一直更新至今。目前版本是 1.17.0。  访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插 件

默认校验规则 验证插件 required. true 必须输入的字段。 2 remote check. php 使用ajax方法调用 check. php验证输入值 email: true 必须输入正确格式的电子部件 url: true 必须输入正确格式的网址 date: true 必须输入正确格式的日期。日期校验ie6出错,慎用 dateS: true 必须输入正确格式的日期(|SO),例如:200906-23,19980122。只验 证格式,不验证有效性。 number true 必须输入合法的数字(负数,小数) digits. true 必须输入整数 credit ard 必须输入合法的信用卡号 equalTo: #field" 输入值必须和#feld相同 accept 输入拥有合法后缀名的字符串(上传文件的后缀)。 maxlength.5 输入长度最多是5的字符串(汉字算一个字符) minlength: 10 输入长度最小是10的字符串(汉字算一个字符) rangelength: [5, 101 输入长度必须介于5和10之间的字符串(汉字算一个字符) ange [5, 10 输入值必须介于5和10之间。 max5 输入值不能大于5。 17 min: 10 输入值不能小于10

验证插件

默认校验规则 验证插件 required. true 必须输入的字段。 2 remote check. php 使用ajax方法调用 check. php验证输入值 email: true 必须输入正确格式的电子部件 url: true 必须输入正确格式的网址 date: true 必须输入正确格式的日期。日期校验ie6出错,慎用 dateS: true 必须输入正确格式的日期(|SO),例如:200906-23,19980122。只验 证格式,不验证有效性。 number true 必须输入合法的数字(负数,小数) digits. true 必须输入整数 credit ard 必须输入合法的信用卡号 equalTo: #field" 输入值必须和#feld相同 accept 输入拥有合法后缀名的字符串(上传文件的后缀)。 maxlength.5 输入长度最多是5的字符串(汉字算一个字符) minlength: 10 输入长度最小是10的字符串(汉字算一个字符) rangelength: [5, 101 输入长度必须介于5和10之间的字符串(汉字算一个字符) ange [5, 10 输入值必须介于5和10之间。 max5 输入值不能大于5。 17 min: 10 输入值不能小于10

验证插件

验证插件 案例1 s(function( S(#frmv"). validate( rules username: required: true, minlength: 6 email: required: true, email: true] errorPlacement: function(error, element)I error. appendTo(element. siblings(span"))

验证插件  案例1      $(function(){  $("#frmV").validate({  rules:{  username:{required:true,minlength:6},  email:{required:true, email:true}  },  errorPlacement:function(error,element){  error.appendTo(element.siblings("span"));  }  }  );  }); 

Cookie插件 Cookie插件 cookie 在 jQuery中,引用 cookie插件后,可以很方便的定乂某个 cookie对 象,并设置 cookie值。通过设置好的 cookie,可以很便利的保存用 户的页面浏览记录,在用户选择保存的情况下,还可以保存用户的 登录信息

Cookie插件  Cookie插件cookie  在jQuery中，引用cookie插件后，可以很方便的定义某个cookie对 象，并设置cookie值。通过设置好的cookie，可以很便利的保存用 户的页面浏览记录，在用户选择保存的情况下，还可以保存用户的 登录信息