jQuery.fn 是啥意思？

Posted 2023-05-07

【中文标题】jQuery.fn 是啥意思？

【英文标题】：What does jQuery.fn mean?jQuery.fn 是什么意思？

【发布时间】：2011-05-04 06:11:38

【问题描述】：

这里的fn是什么意思？

jQuery.fn.jquery

【参考方案1】：

在 jQuery 中，fn 属性只是prototype 属性的别名。

jQuery 标识符（或$）只是一个构造函数，用它创建的所有实例都继承自构造函数的原型。

一个简单的构造函数：

function Test() 
  this.a = 'a';

Test.prototype.b = 'b';

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property

一个类似于 jQuery 架构的简单结构：

(function() 
  var foo = function(arg)  // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  ;

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = 
    init: function () /*...*/
    //...
  ;

  // expose the library
  window.foo = foo;
)();

// Extension:

foo.fn.myPlugin = function () 
  alert(this.myArg);
  return this; // return `this` for chainability
;

foo("bar").myPlugin(); // alerts "bar"

【讨论】：

这保证是真的吗？我可以假设对 jQuery.prototype 的调用与 jQuery.fn 完全相同吗？我担心的是，如果 jQuery 在您调用 .fn 时发挥了一些作用，那么它们就不能互换

哦，我错过了一些东西.. 'window.foo = foo' 给了 'foo' 一个全局范围？从来没有新的东西，我会把它添加到我要学习的技术列表中。

@E.E.33 如果我没记错的话，javascript中的全局范围只是意味着您的变量是窗口对象的参数。

@Imray - return this 允许chaining，所以你可以这样做foo("bar").myPlugin().otherPlugin()

@Shawn 我认为它会被称为属性，而不是参数，对吧？参数将是此处的“a”变量function func1 (a) ... ，属性将是此处的“a”变量var foo = ; foo.a = 'a'。

【参考方案2】：

fn 字面意思是 jquery prototype。

这行代码在源码中：

jQuery.fn = jQuery.prototype = 
 //list of functions available to the jQuery api

但fn 背后的真正工具是它可以将您自己的功能挂接到 jQuery 中。请记住，jquery 将是您的函数的父作用域，因此 this 将引用 jquery 对象。

$.fn.myExtension = function()
 var currentjQueryObject = this;
 //work with currentObject
 return this;//you can include this if you would like to support chaining
;

所以这是一个简单的例子。假设我想做两个扩展，一个放置蓝色边框，将文本着色为蓝色，我希望它们链接起来。

jsFiddle Demo

$.fn.blueBorder = function()
 this.each(function()
  $(this).css("border","solid blue 2px");
 );
 return this;
;
$.fn.blueText = function()
 this.each(function()
  $(this).css("color","blue");
 );
 return this;
;

现在您可以将它们用于这样的类：

$('.blue').blueBorder().blueText();

（我知道这最好用 css 完成，例如应用不同的类名，但请记住，这只是一个演示概念）

This answer 有一个很好的完整扩展示例。

【讨论】：

您不能跳过示例代码中的each 吗？ $.fn.blueBorder = function() this.css("border","solid blue 2px"); return this; ; 可以正常工作，因为 .css() alerady 会遍历元素。

@SoonDead - 你当然可以，因为如果 jQuery 对象拥有一个集合，那么 css 函数将自动在每个内部迭代它们。这只是显示this 中差异的一个示例，其中外部对象是 jquery 对象，内部对象引用元素本身。

@SoonDead 很好的评论，但我真的很喜欢 Travis J 如何解释这个想法/原则。 :)

这是最好的评论——知道 fn 只是一个别名不如知道为什么有人应该关心它有用，这个答案很好地证明了这一点。

在浏览了其他答案之后，我发现这个更容易理解主要概念。谢谢你。 :)

【参考方案3】：

jQuery.fn 定义为jQuery.prototype 的简写。来自source code：

jQuery.fn = jQuery.prototype = 
    // ...

这意味着jQuery.fn.jquery 是jQuery.prototype.jquery 的别名，它返回当前的jQuery 版本。再次来自source code：

// The current version of jQuery being used
jquery: "@VERSION",

【讨论】：

我喜欢这个答案。我准确地展示了如何在源代码中找到定义，然后如何以有用的方式解释定义。很好的“教人钓鱼”的回答方法。 +1。

但是这样做的目的是什么？只是节省了几次击键？

@slier：是的，差不多。

我敢打赌还有其他用途..将函数附加到 $.fn，将产生静态函数

【参考方案4】：

$.fn 是 jQuery.prototype 的别名，它允许您使用自己的函数扩展 jQuery。

例如：

 $.fn.something = function

将允许您使用

$("#element").something()

$.fn 也是 jQuery.fn 的同义词。

【讨论】：

这就是我要找的！非常感谢:)

可以返回值吗？怎么样？

【参考方案5】：

在 jQuery 源代码中，我们有 jQuery.fn = jQuery.prototype = ...，因为 jQuery.prototype 是一个对象，jQuery.fn 的值将只是对 jQuery.prototype 已经引用的同一对象的引用。

要确认这一点，您可以检查jQuery.fn === jQuery.prototype，如果它评估true（确实如此），那么它们引用相同的对象