jQuery.fn是什么意思?


Answers:


848

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

4
这保证是真的吗?我可以假设对jQuery.prototype的调用与jQuery.fn完全相同吗?我担心的是,如果当您调用.fn时jQuery做一些魔术,那么它们是不可互换的
Brandon

4
哦,我丢失了一些..'window.foo = foo'赋予'foo'一个全局范围吗?绝不是新事物,我会将其添加到我要学习的技术列表中。
EE33 2012年

2
@ EE33如果我没记错的话,javascript中的全局作用域只是意味着您的变量是window对象的参数。
肖恩

1
@Imray- return this允许链接,所以您可以这样做foo("bar").myPlugin().otherPlugin()
Racing Tadpole

3
@Shawn我认为它将被称为属性,而不是参数,对吗?参数在这里是'a'变量function func1 (a) { ... },而属性在这里是'a'变量var foo = {}; foo.a = 'a'
扎克2015年

145

jQuery.fn是的简写形式jQuery.prototype。从源代码

jQuery.fn = jQuery.prototype = {
    // ...
}

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

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

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

但是这样做的目的是什么?只是节省了几次击键?
slier 2015年

@slier:是的,差不多。
Andy E

我敢打赌,还有其他用途。将函数附加到$ .fn,将使函数
变为

144

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来完成,例如应用不同的类名,但是请记住,这只是一个演示概念的演示)

这个答案是完整扩展的一个很好的例子。


11
您不能只跳过each示例代码中的吗?$.fn.blueBorder = function(){ this.css("border","solid blue 2px"); return this; };将可以正常工作,因为.css()Alerady会遍历所有元素。
2013年

6
@SoonDead-您当然可以,因为如果jQuery对象拥有一个集合,则该css函数将自动在每个内部对其进行迭代。这只是一个示例,显示了this外部对象是jquery对象而内部对象是元素本身的区别。
特拉维斯·J

1
@SoonDead很好的评论,但我真的很喜欢Travis J解释想法/原理的方式。:)
桑德2014年

5
这是最好的评论-知道fn只是一个别名,并不比知道为什么有人应该关心它有用,这个答案很好地证明了这一点。
Gerard ONeill

1
经过其他答案之后,我发现这个答案更容易理解主要概念。谢谢。:)
VivekP

0

在jQuery源代码中,我们jQuery.fn = jQuery.prototype = {...}既然jQuery.prototype是对象,则的值jQuery.fn将只是对jQuery.prototype已经引用的同一对象的引用。

为了确认这一点,您可以检查(jQuery.fn === jQuery.prototype如果)评估true,然后他们引用相同的对象

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.