前言

Hello!!!最近疫情挺严重的，同志们不要乱跑，

目录

前言

一、自定义插件

1、$.extend()

作用：1.对象继承：$.extend(对象1，对象2) 。对象一会继承对象二

 2.用于扩展jQuery方法（类似于类方法）

2、$.fn.extend()

 作用：扩展jQuery方法（类似对象方法），$.fn.extend({方法名:function(){方法体}})，多个方法之间用逗号隔开

二、第三方插件

 总结：

注意安全，上次分享了jQuery的事件和动画特效，今天九歌来分享jQuery插件。上思维导图：

看了思维导图应该明白今天的分享大致分为两个部分：自定义插件 和 第三方插件。

下面是正文

一、自定义插件

自定义插件分为$.extend和$.fn.extend 两种。这两种方法就类似于类方法和对象方法。

1、$.extend()

作用：1.对象继承：$.extend(对象1，对象2) 。对象一会继承对象二

$(function(){  //继承前var s1 = {};var s2 = {"name":"欧阳干翔","sex":"女"};console.info(s1.name,s1.sex);console.info(s2.name,s2.sex);//开始继承$.extend(s1,s2);//继承后console.info(s1.name,s1.sex);console.info(s2.name,s2.sex);})

 效果图：

 2.用于扩展jQuery方法（类似于类方法）

$(function(){  $.extend({abcd:function(){alert(1234);},getMax:function(a,b){return a>b?a:b;},getMin:function(a,b){return a<b?a:b;}});//调用类方法var max = $.getMax(3,7);console.info(max);console.info($.getMin(22,34));$.abcd();})

 我们先用$.abcd()会发现根本没有这个方法，但是我们定义完后就会出现我们逍遥的效果。

同时，完成一个案例

自定义比较两个数的最大值最小值的两个方法。

 效果图：

2、$.fn.extend()

 作用：扩展jQuery方法（类似对象方法），$.fn.extend({方法名:function(){方法体}})，多个方法之间用逗号隔开

$(function(){   $.fn.extend({xx:function(){//遍历$(this).each(function(i,ck){//ck指的是每一个复选框ck.checked = true;//让其选中})},yy:function(){//遍历$(this).each(function(i,ck){//ck指的是每一个复选框ck.checked = false;//让其选中})}})//案例3：实现全选效果//按钮实现全选$("#ok").click(function(){$(".aaa").xx();})$("#nook").click(function(){$(".aaa").yy();})//用复选框完成全选$("#qx").on("click",function(){//让其他复选框的状态跟全选框一致// console.info($("#qx").prop("checked"));// if($(this).prop("checked")){//说明全选框选中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);})})全选躺着上网课吃辣条玩soul嗯哼

 实现全选和取消全选，使用这种方法的好处是，可以在很多地方调用。而不是仅限于这一处

二、第三方插件

第三方插件挺多的，但是今天只讲官方插件的表单验证

1.插件名：jQuery validation

2.使用步骤：下载插件----->引入库

3.验证的规则要看validate的规则。

4.验证的方式推荐使用js方式，所以今天只讲js方式

 验证以及错误提示：

$("").validate({

        ruels:{

                字段验证

        },

        messages:{

                   信息错误提示     

        }

})

错误信息提示的样式 label.error{

        样式

}

$(function(){   $("#myf").validate({/* 定义规则 */rules: {/* 一一去写对应的框的规则 *//* 只有一个规则的写法 user:"required"*/user: {required: true,rangelength: [2, 4]},pwd: {required: true,rangelength: [3, 3]},pwd1: {equalTo: "#mypwd"},email: {required: true,email: true}},/* 不满足规则时的错误信息 */messages: {user: {required: "必须要填写",rangelength: "2-4位数"},pwd: {required: "必须要填写",rangelength: "3位数"},pwd1: {equalTo: "密码输入不一样"},email: {required: "必须要填写",email: "格式不正确"}}});})用户名：
密码:
确认密码:
邮箱:

 总结：

今天的分享就到这里啦，今天分享的表单验证插件个人感觉好用，比自己写方便，还有很多的插件能用，感兴趣的小伙伴可以去下载并使用。jQuery部分的学习分享就告一段落了，准被学习JavaWeb了，如果这篇文章对你有帮助的话可以点个赞，接下来九歌会持续分享，敬请期待！

唱吧