jQuery定义插件的方法

xiaoxiao2021-02-28  146

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

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

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

$.extend(object)

 例子:

? 1 2 3 4 5 6 7 8 9 10 11 12 /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun: function () { alert( "执行方法一" ); } }); //定义 $.fun(); //调用 $.fn.extentd(object) /* $.fn.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.fn.extend({ fun: function () { alert( "执行方法" ); } }); $( this ).fun(); //等同于 $.fn.fun = function () { alert( "执行方法三" ); } $( this ).fun();

定义jquery插件的基本结构

1.  定义作用域:

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

? 1 2 3    //step 定义JQuery的作用域 ( function ($) { })(jQuery);

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

? 1 2 3 4 5 6 7 //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 //step 定义JQuery的作用域 ( function ($) {    //step-a 插件的默认值属性    var defaults = {      prevId: ‘prevBtn‘,      prevText: ‘Previous‘,      nextId: ‘nextBtn‘,      nextText: ‘Next‘      //……    };    //step 插件的扩展方法名称    $.fn.easySlider = function (options) {      //step-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 //step 定义JQuery的作用域 ( function ($) {    //step-a 插件的默认值属性    var defaults = {      prevId: ‘prevBtn‘,      prevText: ‘Previous‘,      nextId: ‘nextBtn‘,      nextText: ‘Next‘      //……    };    //step 插件的扩展方法名称    $.fn.easySlider = function (options) {      //step-b 合并用户自定义属性,默认属性      var options = $.extend(defaults, options);      //step 支持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 //step 定义JQuery的作用域 ( function ($) {    //step-a 插件的默认值属性    var defaults = {      prevId: ‘prevBtn‘,      prevText: ‘Previous‘,      nextId: ‘nextBtn‘,      nextText: ‘Next‘      //……    };    //step 插件的扩展方法名称    $.fn.easySlider = function (options) {      //step-b 合并用户自定义属性,默认属性      var options = $.extend(defaults, options);      //step 支持JQuery选择器      //step 支持链式调用      return this .each( function () {      });    } })(jQuery);

6. 插件里的方法:

在插件里定义的方法,外界不能直接调用,我在插件里定义的方法也没有污染外界环境。

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 //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);

通过以上内容给大家介绍了jQuery定义插件的方法,希望大家喜欢。

转载请注明原文地址: https://www.6miu.com/read-19251.html

最新回复(0)