目录
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：两种方式使用验证；
放上代码：
<!-- 头部样式表 -->
<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给大家带来的关于插件的一些知识笔分享！
希望可以给有需要的人带来帮助，互相学习！
抗击疫情，我们在家敲代码支持！！！
