目录

一、自定义插件

1、$.extend

2、$.fn.extend

二、第三方插件

1、下载jQuery插件验证库

2、使用插件

一、自定义插件

1、$.extend

对象继承：$.extend(对象1,对象2)

扩展jQuery类方法：$.extend({ 方法名:function(){方法体} })

 对象继承：

<script src="js/jquery-3.5.1.js"></script>
<script>
	let 对象一={
		"吃饭":function(){
			console.log("正在吃饭")
		}
	}
	let 对象二={
		"睡觉":function(){
			console.log("正在睡觉")
		}
	}
	
	对象一.吃饭() //正在吃饭
	对象二.睡觉() //正在睡觉
	
	$.extend(对象一,对象二) //对象一继承对象二
	对象一.睡觉() //对象一继承了对象二睡觉的方法  正在睡觉
</script>

扩展jQuery类方法：

<script src="js/jquery-3.5.1.js"></script>
<script>
	//拓展jQuery
	//让jQuery具备可以拿出多个数字中最大数字的方法
	$.extend({
		max:(...is)=>{
			//...is具备多个参数，而且是个数组
			let max=-Infinity // Infinity是无穷大
			// -Infinity是无穷小
			for(let i of is){
				max = max < i ? i : max
			}
			//返回最大值
			return max
		}
	})
	
	console.log($.max(1,3,2,7,43,5,34,23)) //输出为43
</script>

2、$.fn.extend

拓展jQuery对象：$.fn.extend({ 方法名:function(){} })

<script src="js/jquery-3.5.1.js"></script>
<script>
	$.fn.extend({
		test:()=>{
			console.log("(#^.^#)")
		}
	})
	
	$("a").test()	// 输出为 (#^.^#)
</script>

$ 是jquery
$("xx") 是jquery对象

二、第三方插件

1、下载jQuery插件验证库

官网链接：https://jqueryvalidation.org/

进入官网是以下图片的样子

jquery ui下载 jquery下载插件_jquery ui下载

找到Files，点击Download下载

jquery ui下载 jquery下载插件_jQuery_02

然后会跳转到下面这个界面 

 

jquery ui下载 jquery下载插件_前端_03

翻到最下面，点击链接就可以下载了

jquery ui下载 jquery下载插件_javascript_04

2、使用插件

先把下载好的jQuery插件库导入项目中

jquery ui下载 jquery下载插件_前端_05

两种方式使用验证，一是HTML标签属性方式，二是js方式，推荐使用js方式，以下是js方式

验证及错误信息 
$("表单元素").validate({
        rules:{
                字段验证规则
},
        messages:{
                字段错误信息
}
})
 错误样式
label.error{
                 样式
  }

下面我们写一个表单验证，在写表单验证之前，给大家普及一下常用的验证规则

jquery ui下载 jquery下载插件_jquery ui下载_06

 以下是一个简单的表单验证的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 表单验证插件是基于jQuery的，在导入插件之前需要先导入jQuery -->
		<script src="js/jquery-3.5.1.js "></script>
		<!-- 表单插件 -->
		<script src="js/jquery-validation-1.19.0/dist/jquery.validate.js"></script>
		<!-- 更换文字 -->
		<script src="js/jquery-validation-1.19.0/dist/localization/messages_zh.js"></script>
		<style>
			label.error{
				color: red;
			}
		</style>
	</head>
	<body>
		<form action="">
			<p>
				<input type="text" name="username" placeholder="用户名" />
			</p>
			<p>
				<input type="text" name="password" placeholder="用户密码" />
			</p>
			<p>
				<button>登录</button>
				<button type="reset">取消</button>
                <!-- type="reset" 将按钮的type设置成reset是重置内容，还可清空内容 -->
			</p>
		</form>
		<script type="text/javascript">
			$("form").validate({
				rules:{
					username:{
						required:true,	//必填
						rangelength:[5,10]	//长度是5-10之间
					}, 
					password:{
						required:true,	//必填
						rangelength:[6,10]	//长度是6-10之间
					}
				}
			})
		</script>
	</body>
</html>

上述代码只用了一点点的验证规则，想要添加更多可根据以上验证规则敲

运行起来就是以下图片 

 

jquery ui下载 jquery下载插件_jquery_07

 今天的内容就讲到这里啦