目录
1.自定义插件；
2.第三方插件；
3.表单验证插件的案例；
一、自定义插件
好，我们今天来看看在jQuery里面如何去自定义一个插件，以及后面Leaf用一个案例来带大家看看如何运用别人写好了的插件，也就是第三方插件：
1.1$.extend()
【作用一】实现对象继承
接下来我们就用一个案例来诠释这一作用点：
案例1：两个对象的继承；
//首先定义两个对象var s1 = {};var s2 = {"name":"邓正威","sex":"男"};//继承前console.info(s1.name,s1.sex);//未定义console.info(s2.name,s2.sex);//邓正威 男//使用extend开始继承$.extend(s1,s2)//s1继承自s2//继承后console.info(s1.name,s1.sex);//邓正威 男console.info(s2.name,s2.sex);//邓正威 男
【作用二】扩展jQuery类方法
咱们依然还是用一个案例来看看：
案例2：求最大值(最小值)；
//最大值/最小值$.extend({getMax:function(a,b){return a>b?a:b;},getMin:function(a,b){return a<b?a:b;}});//调用类方法var max = $.getMax(12,17);//调用后再接收console.info(max);//打印测试
1.1$.fn.extend()：扩展jQuery对象方法
我们也用一个案例来看看如何扩展jQuery对象方法
案例1：实现全选效果
$.fn.extend({qx:function(){//遍历$(".aaa").each(function(i,ck){//ck--->每一个复选框ck.checked = true;//选中})},bqx:function(){//遍历$(".aaa").each(function(i,ck){//ck--->每一个复选框ck.checked = false;//不选中})}})//复选框实现全选$("#qx").click(function(){//让其他复选框的状态和全选框保持一致//方式一/* if($("#qx").prop("checked")){$(".aaa").qx();//让其他全选框选中}else{$(".aaa").bqx();//让其他全选框不选中} *///方式二if($("#qx").is(":checked")){$(".aaa").qx();//让其他全选框选中}else{$(".aaa").bqx();//让其他全选框不选中}})//完善全选$(".aaa").click(function(){var f = true;//假设全选框是选中的//遍历$(".aaa").each(function(i,ck){//ck--->每一个复选框if(ck.checked==false){f = false;}})//给全选框重新赋值$("#qx").prop("checked",f);})
二、第三方插件
好啦，接下来让我们来看看第三方插件是怎么运用的。
这是一个官方网站的表单验证插件的案例，让我们一起来看看：
步骤1：下载jQuery插件验证库：jquery.validate.js；
步骤2：将类库引入页面；
<!-- 引入表单验证插件库 --><script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
步骤2：两种方式使用验证；
【1】JS方式【推荐】
验证及错误信息
$("表单元素").validate({
rules:{
字段验证规则
}，
messages:{
字段错误信息
}
})
【2】 HTML标签属性方式
错误样式
表格元素 label.error{
样式
}
放上代码：
<!-- 头部样式表 --><style type="text/css">/* 改变插件的样式 */#myForm label.error{color: red;font-size: 14px;}</style>/* 第三方插件:表单验证插件 *///表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)$("#myForm").validate({rules:{//字段规则部分uname:{required:true,//验证不能为空rangelength:[6,10]},upwd1:"required",upwd2:{required:true,equalTo:"#upwd1"//必须要设置密码1的id为:"upwd1"才可以},uemail:{required:true,email:true},uage:{required:true,range:[1,150]},uurl:{required:true,url:true}},messages:{//错误信息提示部分uname:{required:"用户名必填!",//可自定义错误提示rangelength:"长度要在6-10位之间!"},}})
三、附上思维导图：
好啦，以上就是Leaf给大家带来的关于插件的一些知识笔分享！
希望可以给有需要的人带来帮助，互相学习！
抗击疫情，我们在家敲代码支持！！！
