javascript - examples - ¿Qué significa jQuery.fn?

jquery selector

Question

¿Qué significa la fn aquí?

jQuery.fn.jquery

Answer 1

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

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

Answer 2

En jQuery, la propiedad fn es solo un alias de la propiedad prototype .

El identificador jQuery (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"

Answer 3

fn se refiere literalmente al prototype jquery.

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 de fn es su disponibilidad para conectar su propia funcionalidad a jQuery. Recuerde que jquery será el ámbito principal de su función, por 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 quiero que estén 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 usar esos 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.

Answer 4

jQuery.fn se define de manera abreviada para jQuery.prototype . Desde el código fuente :

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

Eso significa que jQuery.fn.jquery es 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",