jQuery——插件

目录

插件

一.自定义插件             $.extend() 能够实现继承，能够扩展类方法（类似java的静态方法  直接可通过$工具调用）

   二. $.extend()扩展jQuery类方法

$.fn.extend()扩展一个对象方法（作用：实现全选）

第三方插件:表单验证插件

插件规则：

 思维总结：

插件
一.自定义插件 
            $.extend() 能够实现继承，能够扩展类方法（类似java的静态方法  直接可通过$工具调用）
案例1：两个对象的继承

                    var person = {
                    "name":"zhangsan",
                    "sex":"男",
                    "age":18
                    };
 
                 console.log($.type(person));
                 var stu = {
                     "hobby":"打游戏"
                 };
                 console.log(person);
                 console.log(stu);
                 使用$.extend()来实现将stu继承person中的属性
                 $.extend(stu,person);
                 console.log(person);
                 console.log(stu);
案例2 ：(三个参数)

                   // var person = {
                //     "name":"zhangsan",
                //     "sex":"男",
                //     "age":18
                // };
 
                // console.log($.type(person));
                // var stu = {
                //     "hobby":"打游戏"
                // };
                 //var tqq = {
                //     "love":100
                // }
                // console.log(tqq);
                // $.extend(tqq,stu,person);
                // console.log(person);
                // console.log(stu);
                // console.log(tqq);
二. $.extend()扩展jQuery类方法
                $.extend({
                    "mydemo":function(){
                        console.log("这就是我编写的类方法");
                    }
                });
                
                // 调用拓展的类方法
                $.mydemo();
案例：求最大（小）值

                //案例2：求最大值(最小值)
                $.extend({
                    // 实现最大值的类方法制作
                    // "myMax":function(a,b){
                    //     return a>b?a:b;
                    // }
                    // 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(10,20));
                // console.log($.myMax(10,20,50));
                // console.log($.myMin(10,20,50));
                // console.log($.myMax());
 
                //1.3 $.fn.extend()扩展jQuery对象方法
                $.fn.extend({
                    "demo1":function(){
                        console.log("拓展的某个对象的方法");
                    }
                });
                
                $("#obtn1").click(function(){
                    // $(this).demo1();
                    $.fn.demo1();
                });
$.fn.extend()扩展一个对象方法（作用：实现全选）
案例：实现全选

                $.fn.extend({
                    "mycheck":function(){
                        // $(this) 所有的复选框
                        // console.log($(this));
                        $(this).each(function(){
                            // console.log($(this).val());
                            // 调用prop属性设置选中
                            $(this).prop("checked",true);
                        });
                    },
                    "unmycheck":function(){
                        $(this).each(function(){
                            // console.log($(this).val());
                            // 调用prop属性设置选中
                            $(this).prop("checked",false);
                        });
                    }
                });
                
                //为全选按钮设置一个点击事件并调用对象方法
                $("#qx").click(function(){
                    // $("input:checkbox") 得到的是所有的复选框
                    $("input:checkbox").mycheck();
                });
                // 取消全选
                $("#unqx").click(function(){
                    // $("input:checkbox") 得到的是所有的复选框
                    $("input:checkbox").unmycheck();
                });
第三方插件:表单验证插件
案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)

插件规则：

 思维总结：

————————————————
版权声明：本文为CSDN博主「ys_chy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ys_chy/article/details/123487433