Co oznacza jQuery.fn?

Co fntu oznacza?

jQuery.fn.jquery

W jQuery fnwłaściwość jest tylko aliasem prototypewłaściwości.

jQueryIdentyfikator (lub $) jest tylko funkcja konstruktora , a wszystkie instancje stworzone z nim dziedziczyć z prototypu konstruktora.

Prosta funkcja konstruktora:

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

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

Prosta struktura, która przypomina architekturę 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.fnjest zdefiniowany jako skrót jQuery.prototype. Z kodu źródłowego :

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

To oznacza jQuery.fn.jqueryalias dla jQuery.prototype.jquery, który zwraca bieżącą wersję jQuery. Znów z kodu źródłowego :

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

fndosłownie odnosi się do jquery prototype.

Ten wiersz kodu znajduje się w kodzie źródłowym:

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

Ale prawdziwym narzędziem stojącym za tym fnjest jego dostępność do podłączenia własnej funkcjonalności do jQuery. Pamiętaj, że jquery będzie nadrzędnym zakresem dla twojej funkcji, więc thisbędzie odnosić się do obiektu jquery.

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

Oto prosty tego przykład. Powiedzmy, że chcę zrobić dwa rozszerzenia, z których jedno ustawia niebieską ramkę i które koloruje tekst na niebiesko, i chcę, aby były powiązane.

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

Teraz możesz użyć tych przeciwko takiej klasie:

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

(Wiem, że najlepiej to zrobić przy użyciu css, takich jak stosowanie różnych nazw klas, ale pamiętaj, że to tylko demonstracja pokazująca koncepcję)

Ta odpowiedź ma dobry przykład pełnego rozszerzenia.

W kodzie źródłowym jQuery, który mamy, jQuery.fn = jQuery.prototype = {...}ponieważ jQuery.prototypejest to obiekt, którego wartość jQuery.fnbędzie po prostu odwołaniem do tego samego obiektu, który jQuery.prototypejuż się odwołuje.

Aby to potwierdzić, możesz sprawdzić, jQuery.fn === jQuery.prototypeczy to ocenia true(co robi), a następnie odwołują się do tego samego obiektu