jquery 插件语法答案

【问题标题】：jquery plugin syntaxjquery 插件语法
【发布时间】：2011-01-08 16:40:35
【问题描述】：

我正在尝试创建一个 jquery 插件，我希望有以下选项：

$.plugin_name(variable)
$(selector).plugin_name(variable)

第一种情况插件不需要应用于元素（例如，它可以创建一个）第二种情况相同的插件将执行它对所选元素所做的任何事情

我的问题是：如何在插件中指定这个：

if (selector is not given) {
  create an element
} else {
  ( for example) insert variable in elements matching the selector
}

【问题讨论】：

我实际上想知道是否有一种方法可以编写一个可以同时做这两者的插件......如果没有给出选择器，它将创建一个元素......所以理想情况下它可以被称为$.pluginName() 或 $(selector).pluginName() 不是或。谢谢
不可能，至少我的理解是这样的。
I'd like to understand the jQuery plugin syntax的可能重复

标签： jquery

【解决方案1】：

您可以将jQuery.fn.myPluginName = function().... 用于对jQuery 对象进行操作的插件。

对于jQuery 命名空间中的独立函数，您只需设置jQuery.func_name = function()...。

一个例子：

jQuery.fn.erase = function() {
   return this.each(function() {
       jQuery(this).remove();
   });
};

jQuery("body").erase();

jQuery.erase = function(element) {
   jQuery(element).erase();
};

jQuery.erase("body"); // exact same result.

【讨论】：

【解决方案2】：

要覆盖$.plugin_name()，请使用：

jQuery.plugin_name = function(data) {
  // do stuff
}

对于$(selector).plugin_name() 使用：

jQuery.fn.plugin_name = function() {
  return this.each(function() {
    // do stuff
  });
};

见Plugins/Authoring。

【讨论】：

【解决方案3】：

通过使用$.myFunc，您只需将一个函数添加到 jQuery 命名空间。

通过使用$.fn.myFunc，您正在扩展jQuery原型，这意味着函数内部的this关键字将代表从选择器返回的jQuery对象。

如果你想让它们都做同样的事情，你可以检查 jQuery 实例并创建一个新元素：

试试这个：

$.myFunc = $.fn.myFunc = function(first, second) {
    if (!(this instanceof $)) {
        return $.fn.myFunc.apply($('<div>'), arguments);
    }
    // begin plugin code here:
    return this.each(function() {
        $(this).text(first + ' ' + second);
    });
};

// now you can call myFunc in two ways:

$('<div>').myFunc('foo','bar').appendTo('body') 

$.myFunc('bar','foo').appendTo('body');

【讨论】：