【无标题】

<title></title>
        <style type="text/css">
            #myForm label.error{
                color: #000000;
                font-size: 14px;
            }
        </style>
        <!-- 引入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 type="text/javascript">
            
            /* jQuery第五次课☞插件 */
            /*
             * 区分java的类方法以及对象方法
             *     --类(静态)方法：例如DBHelper.getCon()
             *     --对象方法：StuDao sd = new StuDao(); sd.addStu();
             */
            
            
            $(function(){
                /* 一、自定义插件 */
                //1.1 $.extend()实现对象继承
                //案例1：两个对象的继承
                /* var s1={};
                var s2={"name":"哈哈","age":21};
                console.info("继承前"+s1.name,s1.age);
                console.info("继承前"+s2.name,s2.age);
                // 开始继承
                $.extend(s1,s2);//s1继承于s2
                console.info("继承前"+s1.name,s1.age);
                console.info("继承前"+s2.name,s2.age); */
                
                //1.2 $.extend()扩展jQuery类方法
                //案例2：求最大值(最小值)
                /* $.extend({
                    abcd:function(){
                        
                    },
                    getmax:function(a,b){
                        return a>b?a:b;
                    },
                    getmin:function(a,b){
                        return a<b?a:b;
                    }
                });
                $.abcd();
//                 var a=$.getmax(12,13);
//                 var b=$.getmin(43,989);
                console.info($.getmax(12,13));
                console.info($.getmin(43,989));
                 */
                
                //1.3 $.fn.extend()扩展jQuery对象方法
                /* $.fn.extend({
                    xx:function(){
                        $(this).each(function(i,ck){
                            ck.checked=true;
                        })
                    },
                    yy:function(){
                        $(this).each(function(i,ck){
                            ck.checked=false;
                        })
                    }
                }) */
                //案例3：实现全选效果
                /* $("#ok").click(function(){
                    $(".aaa").xx();
                })
                $("#nook").click(function(){
                    $(".aaa").yy();
                }) */
                // 用复选框实现
            /*     $("#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);
                }) */
                
                /* 二、第三方插件:表单验证插件 */
                //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
                
                $("#myForm").validate({
                    rules:{
                        uanme:{
                            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:{
                        uanme:{
                            required:"不能为空",
                            rangelength:"在6-10间"
                        }
                    }
                    
                });
                
            })
            
        </script>
    </head>
    <body>
        <h2>案例3:自定义插件实现全选功能</h2>
        <input type="button" id="ok" value="全选" />
        <input type="button" id="nook" value="取消全选" />
        <input type="checkbox"  value="全选" id="qx" />全选
        <input type="checkbox"  value="吃饭啊" class="aaa" />吃饭啊
        <input type="checkbox"  value="睡觉啊" class="aaa" />睡觉啊
        <input type="checkbox"  value="打豆豆啊" class="aaa" />打豆豆啊
        
        <h2>案例4:使用jQuery validation插件完成表单验证</h2>
        <form id="myForm">
            用户名：<input type="text" name="uname" /><br />
            密码：<input type="text" name="upwd1" id="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="提交" /><br />
            
            
        </form>
    </body>
</html>