jQuery.fn是什么意思?

这里的'fn'是什么意思?

window.jQuery.fn.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" 

jQuery.fn被定义为jQuery.prototype简写。 从源代码 :

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

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

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

字面意思是指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应用不同的类名,但请记住,这只是一个演示来显示概念)

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