¿Qué significa jQuery.fn?

Tenemos la respuesta a esta duda, o por lo menos eso pensamos. Si presentas interrogantes puedes dejarlo en el apartado de comentarios, que sin dudas

Solución:

En jQuery, el fn propiedad es solo un alias para el prototype propiedad.

Él jQuery identificador (o $) es solo un función constructoray 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"

fn literalmente 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 fn es su disponibilidad para conectar su propia funcionalidad en jQuery. Recuerde que jquery será el alcance principal de su función, por lo que this se 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 las quiero encadenadas.

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.

jQuery.fn se define abreviatura de jQuery.prototype. Desde el código fuente:

jQuery.fn = jQuery.prototype = 
    // ...

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

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

Reseñas y puntuaciones de la guía

Tienes la opción de añadir valor a nuestro contenido asistiendo con tu veteranía en las notas.

---

---

Utiliza Nuestro Buscador