今天给大家分享一下插件，我分为了两个，一个是自定义插件，另一一个是第三方插件；
先看看思维导图：
自定义插件我分为了三个案例
先看案例一的代码
案例一：两个对象的继承 $.extend()
var s1 = {};
var s2 = {"name":"癫癫","sex":"人妖"}
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);效果是这样的
开始继承（ $.extend()）和继承后
var s1 = {};
var s2 = {"name":"癫癫","sex":"人妖"}
// console.info(s1.name,s1.sex);
// console.info(s2.name,s2.sex);
//开始继承
$.extend(s1,s2);//s1继承自s2
// //继承后
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);效果图
现在开始我们的案例二
案例二：最大值（最小值）
代码如下
$.extend({
abcd:function(){
alert(123);
},
getMax:function(a,b){
return a>b?a:b;
},
getMin:function(a,b){
return a<b?a:b;
}
});
//调用类方法:
//最大值
var max = $.getMax(10,15);
console.info(max);
//最小值
console.info($.getMin(22,34));
$.abcd(); 效果如下先是最大值后是最小值
案例三：
现在说一下全选功能,现在body这边写一些功能出来
<body>
<h2>案例3：自定义插件全选功能</h2>
<input type="button" value="全选" id="ok">
<input type="button" value="取消全选" id="nook">
<input type="checkbox" id="qx" />全选
<input type="checkbox" class="aaa" value="aaa" />aaa
<input type="checkbox" class="aaa" value="bbb" />bbb
<input type="checkbox" class="aaa" value="ccc" />ccc
</body>接下来是要利用到 $.fn.extend(), $.fn.extend()扩展jquery对象是让下面更好的调用方法
$.fn.extend({
xx:function(){
//遍历
$(this).each(function(i,ck){//ck值每一个复选框
ck.checked = true;//让其选中
})
},
yy:function(){
//遍历
$(this).each(function(i,ck){//ck值每一个复选框
ck.checked = false;//让其选中
})
}
})调用上面的全选功能
$("#ok").click(function(){
$(".aaa").xx();
// alert(1)
})
$("#nook").click(function(){
$(".aaa").yy();
}) 效果如下：点击全选按钮就可以实现全选，若你点击取消全选也会取消全选，小伙伴们可以去试试
接下来给小伙伴们看看完善全选的代码以及效果：
这里是body那边的代码
<body>
<h2>案例3：自定义插件全选功能</h2>
<input type="checkbox" id="qx" />全选
<input type="checkbox" class="aaa" value="aaa" />aaa
<input type="checkbox" class="aaa" value="bbb" />bbb
<input type="checkbox" class="aaa" value="ccc" />ccc
</body>代码如下：都标有注释的
//复选框选中
$("#qx").on("click",function(){
if($(this).is(":checked")){//说明全选框选中
$(".aaa").xx();//让其他复选框选中
}
else{//有一个未选中全选框就不选中
$(".aaa").yy();
}
})
//完善全选
//给所有其他复选框添加点击事件
$(".aaa").click(function(){
var f = true;
//遍历
$(".aaa").each(function(i,ck){//ck值每一个复选框
if(ck.checked==false){
//只要有任何一个未选中
f = false;
}
//改变全选框的状态
$("#qx").prop("checked",f);
})
}) 效果如下：如果你点了全选那个复选框的话就会全部帮你选中，若你全选后面任意一个取消了 “√” 的话那你全选复选框也会取消；若你没有点全选，是逐个 "√" 起来的，除了全选那个没勾的话它会自动帮你勾上
好的，现在自定义插件都说完了，现在来说一下第三方插件
表单验证插件
先来看看案例效果
如果你什么都不写，点提交按钮的话就会提示你，
好废话不多说，看看代码，先是看script那里的，引入jQuery表单验证时要在引入jQuery类库后面，插在前面是不行的
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jquery表单验证 -->
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>来看看body部分，我这里是用了一个form表单，是为了记住文本框写过的东西
<body>
<h2>案例：Query validation 插件表单验证</h2>
<form id="myForm">
用户名：<input type="text" name="uname" /><br />
密码：<input type="text" name="upwd1" /><br />
确认密码：<input type="text" name="upwd2" /><br />
邮箱：<input type="text" name="uemail" /><br />
年龄：<input type="text" name="uage" /><br />
网址：<input type="text" name="uurl" /><br />
<input type="submit" value="提交" />
</form>
</body>接下来看script里的
//案例:表单验证(姓名，年龄，密码，确认密码，邮箱，网址)
$("#myForm").validate({
rules: {
//字段规则部分
uname: {
required: true,
rangelength: [6, 10]
},
upwd1: "required",
upwd2: {
required: true,
equalTo: "#upwd1"
},
uemail: {
required: true,
email: true
},
uage: {
required: true,
range: [1, 150]
},
uurl: {
required: true,
url: true
}
},
messages: {
}
})这样写的话出来的效果是这样的，全部是英文，并且提示也不是红色的
所以我们还要先写一个style如下：
<style type="text/css">
#myForm label.error {
color: red;
font-size: 14px;
}
</style>现在写了style之后效果是这样的
现在提示是红的了吧，现在提示还是英文的，说看不懂，这个简单 ，直接把rules:里面的代码复制到messages:这里面来，把改为中文就行了，小伙伴们看看是不是改一下中文就可以了，其他的和上面rules那里的没有什么区别
$("#myForm").validate({
rules: {
//字段规则部分
uname: {
required: true,
rangelength: [6, 10]
},
upwd1: "required",
upwd2: {
required: true,
equalTo: "#upwd1"
},
uemail: {
required: true,
email: true
},
uage: {
required: true,
range: [1, 150]
},
uurl: {
required: true,
url: true
}
},
messages: {
//错误信息提示部分
uname: {
required: "用户名必填",
rangelength: "长度要在6-10之间"
},
upwd1: "密码必填",
upwd2: {
required: "确认密码必填",
equalTo: "两次密码不一致"
},
uemail: {
required: "邮箱必填",
email: "邮箱格式错误"
},
uage: {
required: "年龄必填",
range: "年龄在1-150岁之间"
},
uurl: {
required: "网址必填",
url: "网址输入错误"
}
}
})好了，来看看效果
ok，这就是今天的分享，谢谢观看
