Wat betekent jQuery.fn?

Wat betekent de fnhier?

jQuery.fn.jquery

Antwoord 1, autoriteit 100%

In jQuery is de eigenschap fnslechts een alias voor de eigenschap prototype.

De jQueryidentifier (of $) is slechts een constructorfunctie, en alle instanties die ermee zijn gemaakt, erven van het prototype van de constructor.

Een eenvoudige constructorfunctie:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';
var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property

Een eenvoudige structuur die lijkt op de architectuur van 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"

Antwoord 2, autoriteit 18%

fnverwijst letterlijk naar het jQuery prototype.

Deze regel code staat in de broncode:

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

Maar de echte tool achter fnis de beschikbaarheid om je eigen functionaliteit in jQuery te haken. Onthoud dat jQuery het bovenliggende bereik van uw functie zal zijn, dus thiszal verwijzen naar het jQuery-object.

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

Dus hier is een eenvoudig voorbeeld daarvan. Laten we zeggen dat ik twee extensies wil maken, één met een blauwe rand en die de tekst blauw kleurt, en ik wil ze aan een ketting.

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

Nu kun je die gebruiken tegen een klasse als deze:

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

(Ik weet dat dit het beste kan met css, zoals het toepassen van verschillende klassennamen, maar houd er rekening mee dat dit slechts een demo is om het concept te laten zien)

Dit antwoordheeft een goed voorbeeld van een volwaardige extensie.

Antwoord 3, autoriteit 17%

jQuery.fnis een afkorting voor jQuery.prototype. Van de broncode:

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

Dat betekent dat jQuery.fn.jqueryeen alias is voor jQuery.prototype.jquery, die de huidige jQuery-versie retourneert. Nogmaals uit de broncode:

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

Antwoord 4

In de jQuery-broncode hebben we jQuery.fn = jQuery.prototype = {...}aangezien jQuery.prototypeeen object is met de waarde jQuery.fnzal gewoon een verwijzing zijn naar hetzelfde object waarnaar jQuery.prototypeal verwijst.

Om dit te bevestigen, kun je jQuery.fn === jQuery.prototypecontroleren als dat trueevalueert (wat het doet), dan verwijzen ze naar hetzelfde object

Antwoord 5

De $.fnis een alias voor jQuery.prototypewaarmee je jQuery kunt uitbreiden met je eigen functies.

Bijvoorbeeld:

$.fn.something = function{}

u kunt gebruiken

$("#element").something()

De $.fnis ook synoniem met jQuery.fn.