jquery - $.functionName 和 $.fn.FunctionName 之间的区别

在 jQuery 中，我见过以下两种定义 jQuery 函数的方法：

$.fn.CustomAlert = function() {
  alert('boo!');
};

$.CustomAlert = function() {
  alert('boo!');
};

我知道它们附加到 jQuery 对象（或 $），但是两者有什么区别？我什么时候应该使用其中之一？

Thanks.

我确信这个问题之前已经被问过好几次了，但我找不到链接。

$.fn指向jQuery.prototype。您添加到其中的任何方法或属性都可供 jQuery 包装对象的所有实例使用。

$.something向 jQuery 对象本身添加属性或函数。

使用第一种形式$.fn.something当您处理页面上的 DOM 元素时，您的插件会对这些元素执行某些操作。当插件与 DOM 元素无关时，使用另一种形式$.something.

例如，如果您有一个记录器函数，那么将其与 DOM 元素一起使用就没有多大意义，如下所示：

$("p > span").log();

对于这种情况，您只需将 log 方法添加到 jQuery 对象本身：

jQuery.log = function(message) {
    // log somewhere
};

$.log("much better");

但是，在处理元素时，您可能需要使用其他形式。例如，如果您有一个绘图插件 (plotGraph)，它从<table>并生成一个图表 - 您将使用$.fn.* form.

$.fn.plotGraph = function() {
    // read the table data and generate a graph
};

$("#someTable").plotGraph();

在相关说明中，假设您有一个可以与元素一起使用或独立使用的插件，并且您希望将其访问为$.myPlugin or $("<selector>").myPlugin()，您可以为两者重用相同的函数。

假设我们想要一个自定义警报，其中日期被添加到每条警报消息的前面。当用作独立函数时，我们将消息作为参数传递给它，当与元素一起使用时，它使用text作为消息的元素：

(function($) {
    function myAlert(message) {
        alert(new Date().toUTCString() + " - " + message);
    }

    $.myAlert = myAlert;

    $.fn.myAlert = function() {
        return this.each(function() {
            myAlert($(this).text());
        });
    };
})(jQuery);

它被包装在一个自执行函数中，因此 myAlert 不会溢出到全局范围。这是两个插件表单之间重用功能的示例。

正如 theIV 提到的，返回 jQuery 包装的元素本身是一个很好的做法，因为您不想破坏链接。

最后，我发现了类似的问题:-)

• jQuery.extend 和 jQuery.fn.extend 之间的区别？ https://stackoverflow.com/questions/1991126/difference-jquery-extend-and-jquery-fn-extend
• jQuery 插件 .fn 问题 https://stackoverflow.com/questions/2671734/jquery-plugin-fn-question
• jQuery 插件创作：为什么有些人使用 jQuery.pluginName，而另一些人使用 jQuery.fn.pluginName？ https://stackoverflow.com/questions/538043/jquery-plugin-authoring-why-do-some-do-jquery-pluginname-and-others-jquery-fn-pl
• 在 jQuery 中，$.myFunction 和 $.fn.myFunction 有什么区别？ https://stackoverflow.com/questions/2398007/in-jquery-what-is-the-difference-between-myfunction-and-fn-myfunction