Что значит jQuery.fn?

Question

Что это fn здесь значит?

jQuery.fn.jquery

Answer 1

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

Answer 2

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, например, применяя разные имена классов, но имейте в виду, что это просто демонстрация, чтобы показать концепцию)

Этот ответ имеет хороший пример полноценного расширения.

Answer 3

jQuery.fn определяется для jQuery.prototype, Из исходного кода:

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

Это означает jQuery.fn.jquery это псевдоним для jQuery.prototype.jquery, который возвращает текущую версию jQuery. Опять из исходного кода:

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

Answer 4

$.fn — это псевдоним для jQuery.prototype , который позволяет вам расширять jQuery своими собственными функциями.

Например:

       $.fn.something = function{}

позволит вам использовать

      $("#element").something()

$.fn также является синонимом jQuery.fn.

Answer 5

В исходном коде jQuery мы имеем jQuery.fn = jQuery.prototype = {...} поскольку jQuery.prototype это объект стоимостью jQuery.fn будет просто ссылка на тот же объект, который jQuery.prototype уже ссылки.

Чтобы подтвердить это, вы можете проверить jQuery.fn === jQuery.prototype если это оценивает true (что он делает), то они ссылаются на один и тот же объект