今天是jquery的最后一节课，小编教大家如何使用插件，也算是一个jquery的一个扩展，大家有不懂的在下方评论或者私信小编噢。
目录
一.自定义插件
1.$.extend(对象1,对象2) ------->对象1继承对象2
2. $.fn.extend({ 方法名:function (){} })
二.第三方插件
1.如何下载jquery插件验证库?
2.如何使用插件
一.自定义插件
1.$.extend(对象1,对象2) ------->对象1继承对象2
格式: $.方法名()
2. $.fn.extend({ 方法名:function (){} })
注：
使用$.fn.extend({ 方法名:function (){} })
它的格式:$().方法名()
$ 是jquery
$("xx") 是jquery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<script>
// 用中文给大家演示一下，在我们平常时还是使用英文
let 小蓝={
"逃课":function(){
console.log("正在逃课中......");
}
}
let 小粉={
"吃饭":function(){
console.log("正在吃饭中");
}
}
// 对象继承 $.extend(对象1，对象2) 对象1继承对象2
// 小蓝继承小粉的方法 小蓝也具备了吃饭的方法
$.extend(小蓝,小粉);
小蓝.吃饭();
// jquery继承小蓝的方法
// 因为小蓝继承了小粉具备了吃饭和逃课的方法 所以jquery具备了该两种方法
$.extend($,小蓝);
$.吃饭();
$.逃课();
// $.fn.extend() 对象方法
$.fn.extend({
test:()=>{
console.log("哈哈哈哈");
}
})
// $ 是jquery
// $("xx") 是jquery对象
// 对象.方法
$("a").test();
</script>
</body>
</html>写一个让jquery具备一个拿到一个数组中的最大值的方法，大家可以自己写一下，下方提供代码给到大家。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<script>
$.extend({
// ...is具备都个参数 相当于一个数组
max:(...is)=>{
let max=-Infinity;//-Infinity:负无穷大 Infinity无穷大
for(let i of is){
// 三元运算符
max=max<i?i:max;
}
return max;
}
})
console.log($.max(1,2,3,4,5,6));
</script>
</body>
</html>二.第三方插件
该插件名叫做JQuery Validation,jQuery Validation插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，简化我们的代码。
1.如何下载jquery插件验证库?
大家点击该链接到官网 https://jqueryvalidation.org/
1.点击链接后我们会跳转到该官网
2.跳转到官网后，往下滑,找到这里点击Download
3.点击Download我们会进到该界面
4.往下滑，滑到最底下，点击jquery-validation-1.19.3.zip
这串蓝色这里点击，就可以下载啦
2.如何使用插件
1.将下好的插件引入页面
2.两种方式使用验证
- HTML标签属性
- JS方式(推荐)
3.JS方式：
- 验证及错误信息：
格式: $("表单元素").validate({
rules:{
字段验证规则
}
messages:{
字段错误信息
}
})
- 错误样式:label.error{
样式
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<!--表单验证插件是基于jquery的 再导入插件之前需要先导入jquery-->
<script src="jquery-validation-1.19.0/dist/jquery.validate.js"></script>
<!-- 这一步是修改提示语是什么语言-->
<script src="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="userPwd" placeholder="密码">
</p>
<p>
<button>登录</button>
<!-- reset 点击按钮时会清空输入框的值 -->
<button type="reset">取消</button>
</p>
</form>
<script>
$("form").validate({
// 字段验证规则
rules:{
userName:{
required: true,//必须填写字段
rangelength:[5,10],//必须填写5-10
},
userPwd:{
required: true,//必须填写字段
rangelength:[5,10],//必须填写5-10
}
},
// 更改原本的错误提示语句
messages:{
userPwd:{
required:"密码为空",
}
}
})
</script>
</body>
</html>
好啦今天的课程到此结束，下次见啦。
