Що означає jQuery.fn?

Що fnтут означає?

jQuery.fn.jquery

У jQuery fnвластивість є лише псевдонімом доprototype властивості.

jQueryІдентифікатор (або $) є просто функцією конструктора , і всі екземпляри , створені з ним, успадкованими від прототипу конструктора.

Проста функція конструктора:

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

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

Проста структура, що нагадує архітектуру 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визначено скорочення для jQuery.prototype. Із вихідного коду :

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

Це означає jQuery.fn.jqueryпсевдонім для jQuery.prototype.jquery, який повертає поточну версію jQuery. Знову з вихідного коду :

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

fn буквально відноситься до jquery prototype .

Цей рядок коду знаходиться у вихідному коді:

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

Але справжнім інструментом fnє його доступність підключити власну функціональність до jQuery. Пам'ятайте, що jquery буде батьківською сферою вашої функції, тому thisбуде посилатися на об'єкт jquery.

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

Тож ось простий приклад цього. Скажімо, я хочу зробити два розширення, одне з яких додає синю облямівку і яке забарвлює текст у синій колір, і я хочу, щоб вони були приковані.

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

Тепер ви можете використовувати їх проти такого класу:

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

(Я знаю, що це найкраще робити з css, наприклад, застосовуючи різні імена класів, але врахуйте, що це лише демонстрація, щоб показати концепцію)

Ця відповідь є хорошим прикладом повноцінного розширення.

У вихідному коді jQuery, який ми маємо, jQuery.fn = jQuery.prototype = {...}оскільки jQuery.prototypeце об'єкт, значення jQuery.fnwill просто буде посиланням на той самий об'єкт, що іjQuery.prototype уже посилається.

Щоб підтвердити це, ви можете перевірити, jQuery.fn === jQuery.prototypeякщо це оцінює true(що це робить), то вони посилаються на той самий об'єкт