Вопросы Теги

документация для jquery.fn [duplicate]

Если вы используете XSLT 2.0, укажите xpath-default-namespace = "http://www.example.com" в разделе stylesheet .

514
задан Andy E 3 November 2010 в 11:46
поделиться

3 ответа

В 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"
805
ответ дан CMS 16 August 2018 в 10:38
поделиться
  • 1
    Гарантируется ли это, что это правда? Могу ли я принять вызов jQuery.prototype точно так же, как jQuery.fn? Я беспокоюсь, если jQuery делает какую-то магию, когда вы вызываете .fn, тогда они не взаимозаменяемы – Brandon 24 February 2012 в 16:08
  • 2
    О, я что-то упустил .. 'window.foo = foo' дает 'foo' глобальную область? никогда не новый, я добавлю это в свой список методов обучения. – E.E.33 5 March 2012 в 21:45
  • 3
    @ E.E.33 Если я не ошибаюсь, глобальная область в javascript просто означает, что ваша переменная является параметром объекта window. – Shawn 20 September 2012 в 18:53
  • 4
    @Imray - return this, чтобы разрешить цепочку , чтобы вы могли сделать foo("bar").myPlugin().otherPlugin() – Racing Tadpole 12 February 2015 в 02:44
  • 5
    @Shawn Я думаю, что это будет называться свойством, а не параметром, верно? Параметром будет здесь переменная 'a' function func1 (a) { ... }, и здесь свойство будет переменной 'a' var foo = {}; foo.a = 'a'. – Zack 27 February 2015 в 17:00

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

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

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

// The current version of jQuery being used
jquery: "@VERSION",
137
ответ дан Andy E 16 August 2018 в 10:38
поделиться

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

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

128
ответ дан Travis J 16 August 2018 в 10:38
поделиться
  • 1
    – SoonDead 9 May 2013 в 13:31
  • 2
    @SoonDead - вы, конечно, могли бы, потому что если объект jQuery содержит коллекцию, то функция css будет автоматически перебирать их внутренне с каждой. Это был просто пример отображения различий в this, где внешний - объект jquery, а внутренний ссылается на сам элемент. – Travis J 9 May 2013 в 19:43
  • 3
    @SoonDead Хороший комментарий, но мне очень нравится, как Тревис J объяснил идею / принцип. :) – Sander 30 May 2014 в 08:53
  • 4
    – Gerard ONeill 6 August 2015 в 19:49
  • 5
    @Taurus - Правильно. Вы можете использовать расширенную версию, если хотите. – Travis J 10 December 2017 в 00:00
Другие вопросы по тегам:

Похожие вопросы: