jQuery插件

前言:今天我们来了解jQuery插件,jQuery插件的主要功能是拓展jquery的功能,内容不多,比较简单,加油。

目录

一.自定义插件

1.$.extend()

2.fn.extend()

二.第三方插件


一.自定义插件

1.$.extend()

作用1:$.extend(对象1,对象2)------->对象1继承对象2

作用2:扩展jQuery类方法,$.extend({方法名:function(){方法体}})

注意多个方法之间用逗号隔开

 作用1的代码:

       let 你好={
			a:function (){
				console.log("哈哈哈<( ̄︶ ̄)↗[GO!]")
			}
		}
		
		let 呵呵={
			b:function (){
				console.log("庸俗(╬▔皿▔)凸")
			}
		}
		//你好继承呵呵的属性
		$.extend(你好,呵呵)
		你好.a()//本身自带的属性
		你好.b()//从呵呵那里继承的

运行效果:

jQuery插件_第1张图片

 作用2的代码:

	  //具备一个可以算出最大值的方法
		
		$.extend({
			max:(...c)=>{
				//...c具备多个参数
				let max=-Infinity//Infinity无穷大
				for(let i of c){
					max=max

2.fn.extend()

作用:扩展jQuery对象方法,$.fn.extend({方法名:function(){方法体}})

注意多个方法体之间用逗号隔开

        //$是jQuery
		//$.("xx")是jQuery对象
		$.fn.extend({
			test:()=>{
				console.log("xxxx")
			}
		})
		//$.test()不能调用
		$("a").test()

二.第三方插件

jQuery插件_第2张图片

官网: 

 jqueryvalidation.org

点击这里下载

jQuery插件_第3张图片

                                                                验证规则

序号 规则 描述
1 required:true 必须输入的字段
2 remote:"check.php" 使用ajax方法调用check.php验证输入值
3 email:true 必须输入正确格式的电子邮件
4 url:true 必须输入正确的网址
5 date:true 必须输入正确格式的日期。日期校验ie6出错,慎用
6 datelSO:true 必须输入正确格式的日期(lSO),例如:2009-06-23,1998/1/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)
8 digits:true 必须输入整数
9 creditcard: 必须输入合法的信用卡号
10 equalTo:"#field" 输入值必须和#field相同
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
12 maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
13 minlength:10 输入长度最小是10的字符串(汉字算一个字符)
14 rangelength:[5,10] 输入长度必须介于5和10之间的字符串(汉字算一个字符)
15 range:[5,10] 输入只必须介于5和10之间
16 max:5 输入值不能大于5
17 min:10 输入值不能小于10

 下载完成后复制粘贴到项目里,然后就可以完成表单验证了



	
		
		
		
		
		
	    
	
	
	

运行结果:

jQuery插件_第4张图片

jQuery插件_第5张图片

jQuery插件_第6张图片 

今天的分享就到次结束了\( ̄︶ ̄*\)),下次见,拜拜(づ ̄3 ̄)づ╭❤~

你可能感兴趣的:(javascript,html,jquery)