你的位置:首页 > Java教程

[Java教程]如何去定义一个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);
复制代码