Was bedeutet jQuery.fn?

Was bedeutet die fn hier meinen?

jQuery.fn.jquery

In jQuery ist die fn Eigenschaft ist nur ein Alias ​​für die prototype Eigentum.

Die jQuery Kennung (bzw $) ist nur ein Konstruktorfunktionund alle damit erstellten Instanzen erben vom Prototyp des Konstruktors.

Eine einfache Konstruktorfunktion:

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

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

Eine einfache Struktur, die der Architektur von jQuery ähnelt:

(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"

fn bezieht sich wörtlich auf die jquery prototype.

Diese Codezeile ist im Quellcode:

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

Aber das eigentliche Werkzeug dahinter fn ist seine Verfügbarkeit, um Ihre eigene Funktionalität in jQuery einzubinden. Denken Sie daran, dass jquery der übergeordnete Gültigkeitsbereich Ihrer Funktion sein wird this bezieht sich auf das jquery-Objekt.

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

Hier ist also ein einfaches Beispiel dafür. Nehmen wir an, ich möchte zwei Erweiterungen erstellen, eine, die einen blauen Rand setzt und den Text blau färbt, und ich möchte, dass sie verkettet sind.

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

Jetzt können Sie diese gegen eine Klasse wie diese verwenden:

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

(Ich weiß, dass dies am besten mit CSS geschieht, z. B. durch Anwenden verschiedener Klassennamen, aber denken Sie bitte daran, dass dies nur eine Demo ist, um das Konzept zu zeigen.)

Diese Antwort enthält ein gutes Beispiel für eine vollwertige Erweiterung.

jQuery.fn ist eine Kurzform für definiert jQuery.prototype. Von dem Quellcode:

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

Das bedeutet jQuery.fn.jquery ist ein Alias ​​für jQuery.prototype.jquery, die die aktuelle jQuery-Version zurückgibt. Wieder von der Quellcode:

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

Die $.fn ist ein Alias ​​für jQuery.prototype wodurch Sie jQuery um eigene Funktionen erweitern können.

Zum Beispiel:

 $.fn.something = function{}

erlaubt Ihnen zu verwenden

$("#element").something()

Die $.fn ist auch gleichbedeutend mit jQuery.fn.

Im jQuery-Quellcode haben wir jQuery.fn = jQuery.prototype = {...} seit jQuery.prototype ist ein Objekt, dessen Wert jQuery.fn wird einfach ein Verweis auf dasselbe Objekt sein, das jQuery.prototype bereits Referenzen.

Um dies zu bestätigen, können Sie überprüfen jQuery.fn === jQuery.prototype wenn das wertet true (was es tut), dann verweisen sie auf dasselbe Objekt