Javascript jQuery.fn 是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4083351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does jQuery.fn mean?
提问by ajsie
What does the fnhere mean?
什么是fn这里是什么意思？
jQuery.fn.jquery
回答by CMS
In jQuery, the fnproperty is just an alias to the prototypeproperty.
在 jQuery 中，fn属性只是属性的别名prototype。
The jQueryidentifier (or $) is just a constructor function, and all instances created with it, inherit from the constructor's prototype.
该jQuery标识符（或$）仅仅是一个构造函数，并用它创建的所有实例，从构造函数的原型继承。
A simple constructor function:
一个简单的构造函数：
function Test() {
this.a = 'a';
}
Test.prototype.b = 'b';
var test = new Test();
test.a; // "a", own property
test.b; // "b", inherited property
A simple structure that resembles the architecture of jQuery:
一个类似于 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"
回答by Andy E
jQuery.fnis defined shorthand for jQuery.prototype. From the source code:
jQuery.fn是 的简写jQuery.prototype。从源代码：
jQuery.fn = jQuery.prototype = {
// ...
}
That means jQuery.fn.jqueryis an alias for jQuery.prototype.jquery, which returns the current jQuery version. Again from the source code:
这意味着jQuery.fn.jquery是 的别名jQuery.prototype.jquery，它返回当前的 jQuery 版本。再次从源代码：
// The current version of jQuery being used
jquery: "@VERSION",
回答by Travis J
fnliterally refers to the jquery prototype.
fn字面意思是指 jquery prototype。
This line of code is in the source code:
这行代码在源代码中：
jQuery.fn = jQuery.prototype = {
//list of functions available to the jQuery api
}
But the real tool behind fnis its availability to hook your own functionality into jQuery. Remember that jquery will be the parent scope to your function, so thiswill refer to the jquery object.
但背后真正的工具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
};
So here is a simple example of that. Lets say I want to make two extensions, one which puts a blue border, and which colors the text blue, and I want them chained.
所以这是一个简单的例子。假设我想做两个扩展，一个放置蓝色边框，将文本着色为蓝色，我希望它们链接起来。
jsFiddle Demo
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;
};
Now you can use those against a class like this:
现在你可以对这样的类使用它们：
$('.blue').blueBorder().blueText();
(I know this is best done with css such as applying different class names, but please keep in mind this is just a demo to show the concept)
（我知道这最好用 css 完成，例如应用不同的类名，但请记住，这只是一个演示概念的演示）
This answerhas a good example of a full fledged extension.
这个答案有一个完整的扩展的好例子。
回答by Yehuda Schwartz
In the jQuery source code we have jQuery.fn = jQuery.prototype = {...}since jQuery.prototypeis an object the value of jQuery.fnwill simply be a reference to the same object that jQuery.prototypealready references.
在我们有jQuery的源代码jQuery.fn = jQuery.prototype = {...}，因为jQuery.prototype是一个对象的值jQuery.fn将简单地向同一对象的引用jQuery.prototype已经引用。
To confirm this you can check jQuery.fn === jQuery.prototypeif that evaluates true(which it does) then they reference the same object
为了确认这一点，您可以检查它jQuery.fn === jQuery.prototype是否评估true（它确实如此）然后它们引用了相同的对象
