jQuery.fn是什么意思？

Question

这里的fn是什么意思？

jQuery.fn.jquery

Answer 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"

Answer 2

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",

Answer 3

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有一个完整成熟扩展的好例子。

Answer 4

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

<块引用>

例如：

 $.fn.something = function{}

<块引用>

将允许您使用

$("#element").something()

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

Answer 5

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

要确认这一点，您可以检查jQuery.fn === jQuery.prototype是否评估true（确实如此），然后他们引用同一对象