什么是fn这里是什么意思？
jQuery.fn.jquery
jQuery.fn 是什么意思？
IT技术
javascript
jquery
2021-02-07 05:55:53
5个回答
在 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 将是您的函数的父作用域，因此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 来完成，例如应用不同的类名，但请记住这只是一个演示来展示概念）
这个答案有一个完整的扩展的好例子。
该$ .fn是一个别名jQuery.prototype，让您的jQuery用自己的功能扩展。
例如：
$.fn.something = function{}
将允许您使用
$("#element").something()
该$ .fn也与代名词jQuery.fn。
在我们有jQuery的源代码jQuery.fn = jQuery.prototype = {...}，因为jQuery.prototype是一个对象的值jQuery.fn将简单地向同一对象的引用jQuery.prototype已经引用。
为了确认这一点，您可以检查它jQuery.fn === jQuery.prototype是否评估true（它确实）然后它们引用相同的对象