Javascript jQuery.fn是什么意思？

这里的

fn

是什么意思

jQuery.fn.jquery

---

jQuery.fn

是定义为

jQuery.prototype

的缩写。从：

这意味着

jQuery.fn.jQuery

是

jQuery.prototype.jQuery

的别名，它返回当前的jQuery版本。再次从以下方面：

---

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

---

fn

字面上指的是jquery

prototype

这行代码位于源代码中：

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

但是

fn

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

此

将引用jquery对象

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

这是一个简单的例子。假设我想做两个扩展，一个是蓝色边框，另一个是蓝色文本，我想把它们链接起来

现在，您可以对这样的类使用它们：

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

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

---

有一个完整扩展的好例子。

在jQuery源代码中，我们有

jQuery.fn=jQuery.prototype={…}

，因为

jQuery.prototype

是一个对象，

jQuery.fn

的值只是对

jQuery.prototype

已经引用的同一个对象的引用

---

要确认这一点，您可以检查

jQuery.fn===jQuery.prototype

，如果该值为

true

（确实如此），则它们引用相同的对象，$。fn是jQuery.prototype的别名，允许您使用自己的函数扩展jQuery

例如：

将允许您使用

---

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

这保证是真的吗？我可以假设对jQuery.prototype的调用与jQuery.fn完全相同吗？我担心的是，如果jQuery在您调用.fn时发挥了一些魔力，那么它们是不可交换的哦，我遗漏了一些东西……”window.foo=foo'为'foo'提供全局范围？这从来都不是什么新鲜事，我将把它添加到我要学习的技术列表中。@E.E.33如果我没有弄错的话，javascript中的全局范围仅仅意味着你的变量是窗口对象的一个参数。@Imray-

返回这个

以允许，这样你就可以做

foo（“bar”）.myPlugin（）.otherPlugin（）

@Shawn我想它会被称为属性，不是参数，对吗？参数在这里是'A'变量

函数func1（A）{…}

，属性在这里是'A'变量

var foo={}；foo.a='a'

。我喜欢这个答案。我确切地展示了如何在源代码中找到定义，然后如何以有用的方式解释定义。“教人钓鱼”的回答方法很好+1.但这样做的目的是什么？只需保存几次击键？@slier:是的，差不多。我打赌还有其他目的..将函数附加到$.fn，将生成静态函数。您不能跳过示例代码中的每个<代码>$.fn.blueorder=function（）{this.css（“border”，“solid blue 2px”）；返回this；}可以正常工作，因为

.css（）

alerady会迭代元素。@SoonDead-当然可以，因为如果jQuery对象持有一个集合，那么

css

函数会自动在内部对每个元素进行迭代。这只是一个例子，展示了

这个

的不同之处，其中外部是jquery对象，内部引用元素本身。@SoonDead评论不错，但我真的很喜欢Travis J解释这个想法/原理的方式。：）这是最好的评论——知道fn只是一个别名远不如知道为什么每个人都应该关心它有用，这个答案很好地说明了这一点。在浏览了其他答案后，我发现这一个更容易理解主要概念。谢谢。：）这就是我要找的！非常感谢：）可以返回值吗？怎样？

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

$.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();

 $.fn.something = function{}

$("#element").something()