Qu'est-ce que jQuery.fn signifie?

Dans jQuery, la propriété fn est juste un alias de la propriété prototype .

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

Une fonction de 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.fn est un raccourci défini 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 renvoie la version jQuery actuelle. Encore une fois du code source :

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

fn se réfère littéralement au prototype jquery.

Cette ligne de code se trouve dans le code source:

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

Mais le véritable outil derrière fn est sa disponibilité pour accrocher votre propre fonctionnalité dans jQuery. Rappelez-vous que jquery sera la portée parentale de votre fonction, donc this se 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 colorise le texte bleu, et je les veux enchaîné.

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 les utiliser contre une classe comme celle-ci:

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

(Je sais que cela se fait mieux avec css, comme l'application de différents noms de classe, mais n'oubliez pas que ce n'est qu'une démo pour montrer le concept)

Cette réponse a un bon exemple d'extension complète.

Pour plus d'exemples et d'extension sur les plugins jQuery, consultez la page de documentation de jQuery Plugins