关于javascript:jquery.fn是什么意思?

What does jQuery.fn mean?

这里的fn是什么意思?

1
jQuery.fn.jquery

在jquery中,fn属性只是prototype属性的别名。

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

一个简单的构造函数函数:

1
2
3
4
5
6
7
8
function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

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

类似于jquery架构的简单结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
(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.fnjQuery.prototype的缩写。从源代码:

1
2
3
jQuery.fn = jQuery.prototype = {
    // ...
}

这意味着jQuery.fn.jqueryjQuery.prototype.jquery的别名,它返回当前jquery版本。再次从源代码:

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


fn字面意思是jquery prototype

这行代码在源代码中:

1
2
3
jQuery.fn = jQuery.prototype = {
 //list of functions available to the jQuery api
}

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

1
2
3
4
5
$.fn.myExtension = function(){
 var currentjQueryObject = this;
 //work with currentObject
 return this;//you can include this if you would like to support chaining
};

这里有一个简单的例子。假设我想做两个扩展,一个放一个蓝色边框,一个给文本加蓝色,我想把它们链接起来。

jsFiddle Demo

1
2
3
4
5
6
7
8
9
10
11
12
$.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;
};

现在,您可以对这样的类使用它们:

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

(我知道这最好使用CSS,例如应用不同的类名,但请记住,这只是一个演示来展示这个概念)

这个答案有一个很好的完全扩展的例子。


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

为了确认这一点,您可以检查jQuery.fn === jQuery.prototype,如果评估true(它是这样做的),那么它们引用相同的对象。