jQuery插件可以在没有元素的情况下工作

jQuery plugin to work without element

本文关键字:元素 情况下 工作 插件 jQuery      更新时间:2023-09-26

如何制作一个可以在不使用元素选择器的情况下执行的jQuery插件?

比如,通常是:
$('#myElementID').myPluginFunction(myVariables);
但是:
$.myPluginFunction(myVariables);

提前感谢!

实际上,您只使用$.extend()而不是$.fn.extend(),请阅读此处了解更多

$.fn.extend({
   myMethod: function(){...}
});
//jQuery("div").myMethod();
$.extend({
 myMethod2: function(){...}
});
//jQuery.myMethod();

你可以这样做:

$.myPluginFunction = function(vars) {
    //...
};

使用$.extend。这里有一个小例子:

$(function() {
    return $.extend({
      addDebugBorder: function(selection, size) {
        return selection.each(function() {
          var color, randomColor;
          randomColor = function() {
            return Math.floor(Math.random() * 256);
          };
          if (!size) size = '5px';
          color = 'rgb(' + randomColor() + ',' + randomColor() + ', ' + randomColor() + ')';
          return $(this).css('border', size + ' solid ' + color);
        });
      }
    });
  });

然后像一样调用

$.addDebugBorder($("table tr td"), '1px');

edit-这个示例代码应该是一个普通的插件,我想我修改了它以使用选择器,而不是只处理div。这就是为什么它有点奇怪的原因。

与其将插件分配给jQuery.fn对象,不如将其分配给根jQuery对象本身。

jQuery.myPluginFunction = function(myVariables) {
   // plugin code
}