在 jQuery 中，我见过以下两种定义 jQuery 函数的方法:
$.fn.CustomAlert = function() {
alert('boo!');
};
$.CustomAlert = function() {
alert('boo!');
};
我知道它们附加到 jQuery 对象(或 $)，但是两者有什么区别？我什么时候应该使用其中之一？
谢谢。
最佳答案
我确信这个问题之前已经被问过好几次了，但我找不到链接。
$.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.*表格。
$.fn.plotGraph = function() {
// read the table data and generate a graph
};
$("#someTable").plotGraph();
相关说明，假设您有一个可以与元素一起使用或独立使用的插件，并且您希望以 $.myPlugin 的形式访问它。或$("<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 - $.functionName 和 $.fn.FunctionName 之间的区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2845981/