如何去定义一个jquery插件

扩展jquery的时候。最核心的方法是以下两种：

$.extend(object) 可以理解为jquery添加一个静态方法

$.fn.extend(object) 可以理解为jquery实例添加一个方法

 

$.extend(object)

         例子：

1 2 3 4 5 6 7

/* $.extend 定义与调用   * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */   $.extend({ fun1: function () { alert("执行方法一"); } });//定义   $.fun1();//调用

　　

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$.fn.extentd(object)        /*  $.fn.extend 定义与调用   * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */   $.fn.extend({ fun2: function () { alert("执行方法2"); } });   $(this).fun2();   //等同于   $.fn.fun3 = function () { alert("执行方法三"); }   $(this).fun3();

　　

定义jquery插件的基本结构

 

1．  定义作用域：

为插件定义一个私有作用域。外界代码不能直接访问插件内部。插件内部代码不受外界干扰，也不会污染到全局变量。

1 2 3 4 5

//step01 定义JQuery的作用域 (function ($) {    })(jQuery);

　　

2. 为插件添加扩展方法：

//step01 定义JQuery的作用域
(function ($) {
    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        
    }

})(jQuery);

3. 设置默认值：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//step01 定义JQuery的作用域 (function ($) {     //step03-a 插件的默认值属性     var defaults = {         prevId: 'prevBtn',         prevText: 'Previous',         nextId: 'nextBtn',         nextText: 'Next'         //……     };     //step02 插件的扩展方法名称     $.fn.easySlider = function (options) {         //step03-b 合并用户自定义属性，默认属性         var options = $.extend(defaults, options);     } })(jQuery);

　　

其中：var options = $.extend(defaults, options)的含义了。表示 options 去覆盖了defaults的值，并把值赋给了options。
在插件环境中，就表示用户设置的值，覆盖了插件的默认值；如果用户没有设置默认值的属性，还是保留插件的默认值。

4. 支持jquery选择器：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//step01 定义JQuery的作用域 (function ($) {     //step03-a 插件的默认值属性     var defaults = {         prevId: 'prevBtn',         prevText: 'Previous',         nextId: 'nextBtn',         nextText: 'Next'         //……     };     //step02 插件的扩展方法名称     $.fn.easySlider = function (options) {         //step03-b 合并用户自定义属性，默认属性         var options = $.extend(defaults, options);         //step4 支持JQuery选择器         this.each(function () {            });     } })(jQuery);

　　

5 ．支持JQuery的链接调用：

为了能达到链接调用的效果必须要把循环的每个元素return

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//step01 定义JQuery的作用域 (function ($) {     //step03-a 插件的默认值属性     var defaults = {         prevId: 'prevBtn',         prevText: 'Previous',         nextId: 'nextBtn',         nextText: 'Next'         //……     };     //step02 插件的扩展方法名称     $.fn.easySlider = function (options) {         //step03-b 合并用户自定义属性，默认属性         var options = $.extend(defaults, options);         //step4 支持JQuery选择器         //step5 支持链式调用         return this.each(function () {            });     } })(jQuery);

　　

6. 插件里的方法：

在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。
//step01 定义JQuery的作用域
(function ($) {
    //step03-a 插件的默认值属性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a 在插件里定义方法
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }
 
    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b 合并用户自定义属性，默认属性
        var options = $.extend(defaults, options);
        //step4 支持JQuery选择器
        //step5 支持链式调用
        return this.each(function () {
            //step06-b 在插件里定义方法
            showLink(this);
        });
    }
})(jQuery);