Que signifie jQuery.fn?

Que signifie fnici?

jQuery.fn.jquery

Dans jQuery, la fnpropriété n'est qu'un alias de la prototypepropriété.

L' jQueryidentifiant (ou $) n'est qu'une fonction constructeur , et toutes les instances créées avec lui, héritent du prototype du constructeur.

Une fonction constructeur simple:

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"

jQuery.fnest défini en raccourci pour jQuery.prototype. Du code source :

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

Cela signifie qu'il jQuery.fn.jquerys'agit d'un alias pour jQuery.prototype.jquery, qui renvoie la version actuelle de jQuery. Encore une fois à partir du code source :

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

fnse réfère littéralement à la jquery prototype.

Cette ligne de code est dans le code source:

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

Mais le véritable outil derrière fnest sa disponibilité pour connecter vos propres fonctionnalités à jQuery. N'oubliez pas que jquery sera la portée parent de votre fonction, donc thisse référera à 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 de cela. Disons que je veux faire deux extensions, une qui met une bordure bleue et qui colore le texte en bleu, et je veux les enchaîner.

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

Vous pouvez maintenant les utiliser contre une classe comme celle-ci:

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

(Je sais que cela est mieux fait avec CSS comme l'application de noms de classe différents, mais s'il vous plaît gardez à l'esprit que ce n'est qu'une démo pour montrer le concept)

Cette réponse a un bon exemple d'une extension à part entière.

Dans le code source jQuery que nous avons jQuery.fn = jQuery.prototype = {...}depuis jQuery.prototypeest un objet dont la valeur jQuery.fnsera simplement une référence au même objet qui fait jQuery.prototypedéjà référence.

Pour confirmer cela, vous pouvez vérifier jQuery.fn === jQuery.prototypesi cela évalue true(ce qu'il fait) puis ils référencent le même objet