¿Qué significa jQuery.fn?

¿Qué significa el fnaquí?

jQuery.fn.jquery

En jQuery, la fnpropiedad es solo un alias de la prototypepropiedad.

El jQueryidentificador (o $) es solo una función de constructor , y todas las instancias creadas con él, heredan del prototipo del constructor.

Una función constructora simple:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property

Una estructura simple que se asemeja a la arquitectura de 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.fnse define como taquigrafía para jQuery.prototype. Del código fuente :

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

Eso significa que jQuery.fn.jqueryes un alias para jQuery.prototype.jquery, que devuelve la versión actual de jQuery. De nuevo desde el código fuente :

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

fnliteralmente se refiere al jquery prototype.

Esta línea de código está en el código fuente:

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

Pero la verdadera herramienta detrás fnes su disponibilidad para conectar su propia funcionalidad a jQuery. Recuerde que jquery será el ámbito principal de su función, por lo que thisse referirá al objeto jquery.

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

Así que aquí hay un ejemplo simple de eso. Digamos que quiero hacer dos extensiones, una que pone un borde azul y que colorea el texto de azul, y quiero encadenarlas.

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;
};

Ahora puedes usarlos contra una clase como esta:

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

(Sé que esto se hace mejor con CSS, como aplicar diferentes nombres de clase, pero tenga en cuenta que esto es solo una demostración para mostrar el concepto)

Esta respuesta tiene un buen ejemplo de una extensión completa.

En el código fuente de jQuery que tenemos, jQuery.fn = jQuery.prototype = {...}ya que jQuery.prototypees un objeto, el valor de jQuery.fnserá simplemente una referencia al mismo objeto que jQuery.prototypeya hace referencia.

Para confirmar esto, puede verificar jQuery.fn === jQuery.prototypesi eso evalúa true(lo que hace) y luego hacen referencia al mismo objeto