Qu'est jQuery.fn veut dire?

Question

Ce qui ne l 'fn' ici?

window.jQuery.fn.jquery

Answer 1

En jQuery, fn de la propriété est juste un alias à l' prototype de la propriété.

L' jQuery identifiant (ou $) est juste une fonction constructeur, et toutes les instances créées, hériter du prototype du constructeur.

Un simple constructeur de la fonction:

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

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

Une structure simple qui ressemble à l'architecture 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 2

fn renvoie littéralement à la jquery prototype.

Cette ligne de code dans le code source:

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

Mais la véritable outil de derrière fn est sa disponibilité pour accrocher vos propres fonctionnalités de jQuery. Rappelez-vous que jquery sera le parent de votre fonction, de sorte qu' this va se référer à l'objet jquery.

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

Voici donc un exemple simple. Disons que je veux faire deux extensions, l'une qui met une bordure bleue, et les couleurs du texte en bleu, et je veux les enchaînés.

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

Maintenant, vous pouvez utiliser celles à l'encontre d'une classe comme ceci:

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

(Je sais que c'est mieux de le faire avec du css telles que l'application de différents noms de classe, mais s'il vous plaît gardez à l'esprit, c'est juste une démo pour montrer le concept)

Cette réponse a un bon exemple d'une véritable extension.

Answer 3

jQuery.fn est défini d'abréviation pour jQuery.prototype. À partir du code source:

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

Cela signifie que jQuery.fn.jquery est un alias pour jQuery.prototype.jquery, qui retourne la version jQuery. Nouveau à partir du code source:

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