• jQuery自定义插件


      1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent()、appendTo()

      2.一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法,jQuery的全局函数就是属于jQuery命名空间的函数,封装全局函数的插件

      3.选择器插件

    jQuery插件机制

      jQuery为开发插件提拱了两个方法,分别是:

         jQuery.fn.extend(object); 给jQuery对象添加方法。

         jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法,可以理解为添加静态方法。

         这两个方法都接受一个参数,类型为Object,Object对应的"名/值对"分别代表"函数或方法体/函数主体"。

    1.对象级别的插件开发,

      这里的方法提供一个参数value,如果调用方法时传入value,那么就用这个值来设置字体颜色,否则就是获取匹配无此的字体颜色的值

    复制代码
    <span style="font-size:12px;">;(function($){  
        $.fn.extend({  
            "color":function(value){  
                return this.css("color",value);  
            }  
        });  
    })(jQuery);</span>  
     调用时可直接写成:$("div").color("red");
    另外如果要定义一组插件,可以使用如下所示写法:
    <span style="font-size:12px;">;(function($){  
        $.fn.extend({  
            "color":function(value){  
                //这里写插件代码  
            },  
            "border":function(value){  
                //这里写插件代码  
            },  
            "background":function(value){  
                //这里写插件代码  
            }  
        });  
    })(jQuery);</span> 
    添加jQuery对象级的插件,是给jQuery类添加方法
    ;(function($){  
        $.fn.extend({  
            "函数名":function(自定义参数){  
                //这里写插件代码  
            }  
        });  
    })(jQuery);  
    或者  
    ;(function($){  
        $.fn.函数名=function(自定义参数){  
            //这里写插件代码  
        }  
    })(jQuery);  
    调用方法:$("#id").函数名(参数);
    复制代码

    2.类级别的插件开发,封装全局函数的插件

    例如新增两个函数,用于去除左侧和右侧的空格。

    复制代码
    <span style="font-size:12px;">;(function($){  
        $.extend({  
            ltrim:function(text){  
                return (text||"").replace(/^s+g,"");  
            },  
            rtrim:function(text){  
                return (text||"").replace(/s+$/g,"");  
            }  
        });  
    })(jQuery);  
    或者  
    ;(function($){  
        $.ltrim=function(text){  
            return (text||"").replace(/^s+g,"");  
        },  
        $.rtrim=function(text){  
            return (text||"").replace(/s+$/g,"");  
        }  
    

    })(jQuery);</span>

     调用函数:

    <span style="font-size:12px;">$("trimTest").val(

        jQuery.trim(" test ")+"
    "+  
        jQuery.ltrim(" test ")+"
    "+  
        jQuery.rtrim(" test ")  
    );</span>  
    文本框中第一行字符串左右两侧的空格都被删除。
     第二行的字符串只有左侧的空格被删除。
     第三行的字符串只有右侧的空格被删除。


    .jQuery类级别的插件,相当于添加静态方法
    ;(function($){  
        $.extend({  
            "函数名":function(自定义参数){  
                //这里写插件代码  
            }  
        });  
    })(jQuery);  
    或者  
    ;(function($){  
        $.函数名=function(自定义参数){  
            //这里写插件代码  
        }  
    })(jQuery);  
    调用方法:$.函数名(参数);
    复制代码

    使用jQuery.extend(object)添加全局函数

    复制代码
    jQuery.extend({
        foo:function(){
            alert("This is a test.");    
        },
        bar:function(){
           alert("This is another test");
        }
    });
    复制代码

      

    添加一个新的全局函数,我们只需如下定义:

    jQuery.foo = function() {   
     alert("This is a test.");  
     }; 

    增加多个全局函数

    添加多个全局函数,可采用如下定义:

    复制代码
    jQuery.foo = function(){
      alert("This is a test.");  
    };
    jQuery.bar = function(param){
        alert("This is another test.");
    }
    复制代码

    调用时和一个函数的一样的:jQuery.foo(); jQuery.bar(); 简写形式为:$.foo(); $.bar("bar");

     使用命名空间

    复制代码
    jQuery.myPlugin = {
        foo:function(){
           alert("This is a test.");
        }  ,
       bar:function("bar"){
          alert("This is another test.");
       }  
    }
    

    采用命名空间的函数仍然是全局函数,调用时采用的方法:

    jQuery.myPlugin.foo();

    jQuery.myPlugin.bar("bar");

    简写形式为:

    $.myPlugin.foo();

    $.myPlugin.bar("bar");

    通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突。

    复制代码
    虽然在jQuery命名空间中,我们禁止使用javascript函数名和变量名。但仍然不可避免某些函数名或变量名将与其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。
    $.fn.extend是一个实例的扩展,但是$.extend是类的扩展
    <script type="text/javascript"> (function($){ $.fn.extend({ myPlugName:function(){ $(this).click(function(){ alert($(this).val()); }); } }); })(jQuery); </script>

    <body>
        <input type="button" value="点击我" id="btn" />
    </body>
    &lt;script type="text/javascript"&gt;
          $("#btn").myPlugName();
    &lt;/script&gt;<br><br><br><br></pre>
    
    复制代码
        <script type="text/javascript">
            (function($){
                $.fn.hilight=function(options){
                    var defaults={
                        foreground:'red',
                        background:'yellow'    
                    };
                    var opts = $.extend(defaults,options);
                    $(this).css("background-color",opts.background);
                    $(this).css("color",opts.foreground);
                };
            })(jQuery);
        </script>
    

    <body>
    <div id="myDiv">This is a Params JQuery!</div>
    </body>
    <script type="text/javascript">
    $("#myDiv").hilight({foreground:'blue'});
    </script>

    复制代码

    var opts = $.extend(defaults,options);这句话的意思是吧defaults的属性和options的属性合并并保存到opts中 不懂的话参考:http://api.jquery.com/jQuery.extend/

    暴露插件的默认设置

    我们对上面代码的一种改进是暴露插件的默认设置,这有利于让插件的使用者更容易用较少的代码覆盖和修改插件,接下来我们开始利用函数对象。

    复制代码
    // plugin definition
    $.fn.hilight = function(options){
      // extend our default options with those provided.
      // note that the first arg to extend is an empty object , this is to keep form overriding our "defaults" object.
      var opts = $.extend({},$options);
    // our plugin inplementation code goes here.  
    };
    // plugin defaults -added as a property on our plugin function
    $.fn.hilight.default = {
        foreground : "red",
        background:"yellow"    
    };
    // 这个只需要调用一次,且不一定要在ready块中调用
    $.fn.hilight.defaults.foreground = "blue";
    复制代码
    我们像这样使用插件的方法,结果它设置蓝色的前景色:
    $("myDiv").hilight();

    由于美元符号(“$”)不仅仅只有jQuery库会使用到,其他Javascript库也可能使用到,假如其他库中“$”也有特别的含义,那么就会引起不必要冲突了,

    下面定义了一个jQuery函数,形参是$,函数定义完成后,把jQuery这个实参传递进去,立即调用执行,这样的好处是我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突。

    (function($) {
        $.fn.myPluginName = function() {
            // your plugin logic
        };
    })(jQuery);


    3、总结

    jQuery为开发插件提拱了两个方法,分别是:

    jQuery.fn.extend(object);  给jQuery对象添加方法。
    jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。

    3.1 jQuery.fn.extend(object);

    fn 是什么东西呢。查看jQuery代码,就不难发现。

    jQuery.fn = jQuery.prototype = {  

    init: function( selector, context ) {//....   

    //......  

    }; 

    原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

    jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

    $.fn是指jQuery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,如扩展$.fn.abc()是对jquery扩展了一个abc方法,那么后面的每个jQuery实例都可以引用这个方法了。

    你可以这样:$("myDiv").abc();

    比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

    复制代码
    $.fn.extend({    
         alertWhileClick:function(){  
             $(this).click(function(){  
                  alert($(this).val());  
              });   
          }   
    });   
    

    $("#input1").alertWhileClick();
    //页面上为:
    <input id="input1" type="text"/>

    复制代码

    3.2 jQuery.extend(object); 

    为jQuery类添加添加类方法,可以理解为添加静态方法。如:

    $.extend({  

        add:function(a,b){return a+b;}  

    });  

    便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了

    $.add(3,4);

  • 相关阅读:
    LeetCode Power of Three
    LeetCode Nim Game
    LeetCode,ugly number
    LeetCode Binary Tree Paths
    LeetCode Word Pattern
    LeetCode Bulls and Cows
    LeeCode Odd Even Linked List
    LeetCode twoSum
    549. Binary Tree Longest Consecutive Sequence II
    113. Path Sum II
  • 原文地址:https://www.cnblogs.com/xiangW/p/11095443.html
Copyright © 2020-2023  润新知