плагин jQuery .fn вопрос

Question

Кажется, у меня проблемы с созданием плагина jquery. Я тестирую простой плагин в консоли Firebug, и функция не определяется, как я ожидал. Вот кодовый шаблон, который я использую

jQuery.fn.test = function () {console.log("runs")}

Я пытаюсь вызвать функцию с помощью этого вызова, которая не работает.

$.test()

Но этот звонок

$.fn.test()

Я не думаю, что это так, как это должно работать, поэтому я думаю, что я делаю что-то не так, хотя вся документация, кажется, согласна, что я должен быть прав. У кого-нибудь есть совет?

Спасибо, Cory

Answer 1

Попробуйте $('div').test()!

Прочитайте http://docs.jquery.com/Plugins/Authoring для хорошего знакомства с плагинами jQuery.

---

Хорошо, вот дополнительная информация, пока я здесь. При создании плагина существует три почти абсолютных правила:

• Всегда используйте анонимный метод, когда определяете свой плагин, чтобы вы гарантированно получили объект jQuery с $.
• Всегда пытайтесь вернуть объект jQuery снова (для создания цепочки).
• Всегда перебирайте элементы, поскольку ваш селектор, скорее всего, соответствует более чем одному элементу.

Итак, ради соглашения, начните так:

(function($) {
  $.fn.test = function() {
    return this.each(function() {
      console.log("runs");
    });
  }
})(jQuery);

Это напечатает «прогоны» для каждого элемента, соответствующего вашему селектору (много, если вы просто используете div). Попробуйте ввести $(this).css('background-color', 'red'); и посмотрите, что получится.

Еще одним хорошим местом для поиска будут различные сайты социального кодирования ( GitHub , BitBucket , Google Code и т. Д.) И поиск по запросу "jQuery Plugin" чтобы увидеть, как это делают другие.

Answer 2

Существует два способа расширения jQuery. Тот, который вы выбрали, позволяет такие вещи, как:

$("div").test();

хотя код не в правильной форме для этого. Чтобы просто добавить статический метод, вы можете вызвать:

$.test();

сделать это:

jQuery.test = function() {
  ...
};

См. Плагины / Авторские .