jQuery05：插件

回顾一下java的知识点：

区分java的类方法以及对象方法
              --类(静态)方法：例如DBHelper.getCon()
              --对象方法：StuDao sd = new StuDao(); sd.addStu();

在写方法之前一定要先引入类库

<!-- 引入jQuery库 -->
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <!-- 引入jQuery的表单验证的类库 -->
        <script src="./js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>

另起一个script块
        <script type="text/javascript">

$(function(){

/* 一、自定义插件 */
                //1.1 $.extend()实现对象继承
                //案例1：两个对象的继承
                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);
  效果图：

                

 //1.2 $.extend()扩展jQuery类方法
                //案例2：求最大值(最小值)
                $.extend({
                    abcd:function(){
                        alert(1234);
                    },
                    getMax:function(a,b){
                        return a>b?a:b;
                    },
                    getMin:function(a,b){
                        return a<b?a:b;
                    }
                }); 
                var n = $.getMax(12,56);
                 console.info(n);
                console.info($.getMin(10,23));
                $.abcd();

效果图：

//1.3 $.fn.extend()扩展jQuery对象方法
                $.fn.extend({
                    xx:function(){
                        //遍历  谁调用这个方法 this就指代谁
                        $(this).each(function(i,ck){//ck指每一个复选框
                            ck.checked = true;//让其选中
                        })
                    },
                    yy:function(){
                        //遍历  此时谁调用这个方法 this就指代谁
                        $(this).each(function(i,ck){//ck指每一个复选框
                            ck.checked = false;//让其不选中
                        })
                    },
                })

//案例3：实现全选效果
                //按钮实现全选
                /* $("#ok").click(function(){
                    $(".aaa").xx();
                })
                $("#nook").click(function(){
                    $(".aaa").yy();
                }) */
                
                //用复选框实现全选
                    
                /* $("#qx").click(function(){
                    //让其他复选框的状态跟全选框保持一致
                    //console.info("#qx").prop("checked");
                    //if($("#qx").prop("checked")){//说明全选框选中
                    if($(this).is(":checked")){
                        $(".aaa").xx();//让其他复选框选中
                    }
                    else{
                        $(".aaa").yy();
                    }
                }) */
                
                //完善全选
                //给所有其他复选框添加点击事件
                /* $(".aaa").click(function(){
                    var f = true;//假设全选框是选中的
                    //遍历 不能用this 不仅只有一个复选框
                    $(".aaa").each(function(i,ck){//ck每一个复选框
                        if(ck.checked==false){//只要有任何一个没选中
                            f = false;
                        }
                    })
                    //给全选框重新赋值 改变其状态
                    $("#qx").prop("checked",f);
                }) */

/* 二、第三方插件:表单验证插件 */

                //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
                $("#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位之间"
                        }
                    }
                })

效果图：

 jQueryValidate规则

 使用表单验证的步骤：

①下载jQuery插件验证库

②将类库引入页面

③两种方式使用验证

})