jQuery05&extend继承&自定义插件

一.自定义插件
1.1 $.extend的使用以及案例

                /* 一、自定义插件 */
                //1.1 $.extend()实现对象继承
                //案例1：两个对象的继承
                var person = {
                    "name": "张三",
                    "sex": "男",
                    "age": 18
                };
                console.log($.type(person));
 
                var stu = {
                    "hobby": "敲代码"
                };
                console.log(person);
                console.log(stu);
 
                //使用$.extends() 来实现stu继承person中的属性
                $.extend(stu, person);
                console.log(person);
                console.log(stu);
 
                //extends(三个参数)
                //第一个参数的对象继承后面所有参数的对象
                var v = {
                    "like": "美女"
                }
                console.log(v);
                $.extend(v, stu, person);
                console.log(person);
                console.log(stu);
                console.log(v);
                // $.extend()扩展jQuery类方法
                //类方法  java中的静态方法  可以直接通过$.方法()
                $.extend({
                    "mydemo": function() {
                        console.log("这是我编写的类方法。");
                    }
                });
                //调用拓展的类方法
                $.mydemo();
 
                //案例2：求最大值(最小值)
                $.extend({
                    //求最大值
                    //arguments 数组容器，可以存储函数中的参数个数
                    "myMax": function() {
                        var max = arguments[0];
                        if (arguments.length > 0) {
                            for (var i = 0; i < arguments.length; i++) {
                                if (arguments[i] > max) {
                                    max = arguments[i];
                                }
                            }
                        } else {
                            return arguments.length;
                        }
                        return max;
                    },
                    //求最小值
                    "myMin": function() {
                        var min = arguments[0];
                        if (arguments.length > 0) {
                            for (var i = 0; i < arguments.length; i++) {
                                if (arguments[i] < min) {
                                    min = arguments[i];
                                }
                            }
                        } else {
                            return arguments.length;
                        }
                        return min;
                    }
                });
 
                console.log($.myMax(44, 22));
                console.log($.myMin(12, 2));
1.2 $.fn.extend的使用以及案例

//1.3 $.fn.extend()扩展jQuery对象方法
                $.fn.extend({
                    "Demo1": function() {
                        console.log("演示一");
                    }
                });
 
                $("#obtn1").click(function() {
                    $.fn.Demo1();
                });
 
                //案例3：实现全选效果
                //通过$.fn.extend()扩展一个对象方法(作业：实现全选)
                $.fn.extend({
                    "mycheck": function() {
                        $(this).each(function() {
                            // 调用prop属性设置选中
                            $(this).prop("checked", true);
                        });
                    },
                    "unmycheck": function() {
                        $(this).each(function() {
                            // 调用prop属性设置选中
                            $(this).prop("checked", false);
                        });
                    }
                });
 
                //为全选按钮设置一个点击事件并调用对象方法
                $("#qx").click(function() {
                    // $("input:checkbox") 得到的是所有的复选框
                    $("input:checkbox").mycheck();
                });
                // 取消全选
                $("#unqx").click(function() {
                    // $("input:checkbox") 得到的是所有的复选框
                    $("input:checkbox").unmycheck();
                });
二.第三方插件
1.1 表单验证案例

        <!-- jQuery库 -->
        <script src="js/jquery-3.3.1.js"></script>
        <!-- 引入jQuery第三方表单验证插件 valida.js -->
        <script src="js/jquery.validate.js"></script>
 
<!-- 第三方插件（表单验证） -->
        <script>
            /* 二、第三方插件:表单验证插件 */
            //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
            $(document).ready(function() {
                //获取表单标签调用设置插件的方法
                $("#myForm").validate({
                    //规则rules
                    rules: {
                        //用户名 username
                        username: {
                            required: true
                        },
                        //验证密码规则
                        mypassword: {
                            required: true,
                            range: [8, 10]
                        },
                        //确认密码规则
                        mypassword2: {
                            required: true,
                            range: [8, 10]
                        },
                        //确认年龄规则
                        myage: {
                            required: true,
                            range: [18, 99]
                        },
                        // 验证邮箱规则
                        myeamil: {
                            required: true,
                            email: true
                        },
                        //验证网址规则
                        myurl: {
                            required: true,
                            url: true
                        }
                    },
                    // 自定义错误信息messages
                    messages: {
                        // 账户的错误信息提示
                        username: {
                            required: "用户名不能为空"
                        },
                        mypassword: {
                            required: "密码不能为空",
                            email: "密码的格式不满足要求"
                        },
                        mypassword2: {
                            required: "密码不能为空",
                            email: "与输入的密码不符"
                        },
                        myage: {
                            required: "年龄不能为空",
                            email: "年龄过小（过大）"
                        },
                        myeamil: {
                            required: "邮箱不能为空",
                            email: "邮箱的格式不满足要求"
                        },
                        myurl:{
                            required: "网址不能为空",
                            email: "网址的格式不满足要求"
                        }
                    }
                });
            });
        </script>