代码之家 › 专栏 › 技术社区 › Russell

jquery-$.functionname和$.fn.functionname之间的差异

function jquery

Russell · 技术社区 · 16 年前

在jquery中,我看到了以下两种定义jquery函数的方法:

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

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

我知道它们附加到jquery对象(或$),但是这两者之间有什么区别?我应该什么时候用一个还是另一个?

谢谢。

3 回复 | 直到 12 年前

Community Mohan Dere 9 年前

我确信这个问题以前被问过好几次,但我找不到链接。

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

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

使用第一个窗体 $.fn.something 当你处理页面上的DOM元素时,你的插件会对这些元素做些什么。当插件与DOM元素无关时,使用另一个窗体 某物 .

例如,如果您有一个logger函数,那么将它与dom元素一起使用就没有多大意义了,比如:

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

对于这种情况,只需将log方法添加到jquery对象iself:

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包装的元素本身是一个很好的实践,因为您不希望破坏链接。

最后,我发现了类似的问题:—)

Svante Svenson 16 年前

一

$.a = function() {
  return "hello world";
};

alert($.a());

乙

$.fn.b = function() {
  return "hello " + $(this).length + " elements";
}

alert($("p").b());

-2

Reza Baradaran Gazorisangi 12 年前

要了解jquery插件开发,我们必须了解全局函数。jquery通过我们称之为全局函数的工具具有内置的能力。这些是jquery的方法,但都是jquery命名空间中的函数。

要向jquery命名空间添加函数,只需将新函数作为jquery对象的属性添加即可:

jQuery.globalFunction = function() {
  alert('Hi.. just test');
};

要使用它,我们可以写:

jQuery.globalFunction();

或

$.globalFunction();

添加instand方法类似,但我们扩展了jquery.fn对象。

jQuery.fn.myMethod = function() {
  alert('Hello...!');
}

我们可以使用任何选择器表达式调用这个新方法

$('div').myMethod();

有关完整的解释,请参阅 This Link