Как создать функцию jQuery (новый метод или плагин jQuery)?

Я знаю, что в JavaScript синтаксис выглядит следующим образом:

function myfunction(param){
  //some code
}

Есть ли способ объявить функцию в jQuery, которая может быть добавлена ​​к элементу? Например:

$('#my_div').myfunction()

Из документов :

(function( $ ){
   $.fn.myfunction = function() {
      alert('hello world');
      return this;
   }; 
})( jQuery );

Тогда вы делаете

$('#my_div').myfunction();

Несмотря на все ответы, которые вы уже получили, стоит отметить, что вам не нужно писать плагин для использования jQuery в функции. Конечно, если это простая одноразовая функция, я считаю, что писать плагин - это излишне. Это можно сделать гораздо проще, просто передав селектор функции в качестве параметра . Ваш код будет выглядеть примерно так:

function myFunction($param) {
   $param.hide();  // or whatever you want to do
   ...
}

myFunction($('#my_div'));

Обратите внимание, что $в имени переменной $paramне требуется. Моя привычка - легко запомнить, что эта переменная содержит селектор jQuery. Вы можете просто использовать param.

Хотя существует множество документации / учебных пособий, простой ответ на ваш вопрос таков:

// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)

$.fn.myfunction = function () {
    // blah
};

Внутри этой функции thisпеременная соответствует обернутому набору jQuery, в котором вы вызывали свою функцию. Так что-то вроде:

$.fn.myfunction = function () {
    console.log(this.length);
};

$('.foo').myfunction();

... сбросит на консоль количество элементов с классом foo.

Конечно, в семантике есть нечто большее (а также лучшие практики и весь этот джаз), поэтому обязательно прочитайте об этом.

Чтобы сделать функцию доступной для объектов jQuery, вы добавляете ее в прототип jQuery (fn - это ярлык для прототипа в jQuery) следующим образом:

jQuery.fn.myFunction = function() {
    // Usually iterate over the items and return for chainability
    // 'this' is the elements returns by the selector
    return this.each(function() { 
         // do something to each item matching the selector
    }
}

Обычно это называется плагином jQuery .

Пример - http://jsfiddle.net/VwPrm/

Да, вы описываете плагин jQuery.

Чтобы написать плагин jQuery, вы создаете функцию в JavaScript и назначаете ее свойству объекта jQuery.fn.

Например

jQuery.fn.myfunction = function(param) {
    // Some code
}

В вашей функции плагина thisключевое слово установлено на объект jQuery, для которого был вызван ваш плагин. Итак, когда вы делаете:

$('#my_div').myfunction()

Тогда thisвнутри myfunctionбудет установлен объект jQuery, возвращаемый $('#my_div').

Смотрите http://docs.jquery.com/Plugins/Authoring для полной истории.

$(function () {
    //declare function 
    $.fn.myfunction = function () {
        return true;
    };
});

$(document).ready(function () {
    //call function
    $("#my_div").myfunction();
});

Вы также можете использовать расширение (способ создания плагинов jQuery):

$.fn.extend(
{
    myfunction: function () 
    {
    },

    myfunction2: function () 
    {
    }
});

Использование:

$('#my_div').myfunction();

Вы можете написать свои собственные плагины jQuery (функция, которая может быть вызвана на выбранных элементах), как показано ниже:

(функция ($) {
    $ .fn.myFunc = function (param1, param2) {
        // this - объект jquery содержит выбранные вами элементы
    }
}) (jQuery);

Позвоните позже, как:

$ ('div'). myFunc (1, null);

Да, методы, которые вы применяете к элементам, выбранным с помощью jquery, называются плагинами jquery, и в документах jquery содержится достаточно информации об авторских разработках .

Стоит отметить, что jquery - это просто javascript, поэтому в «методе jquery» нет ничего особенного.

Создайте метод colorize:

$.fn.colorize = function custom_colorize(some_color) {
    this.css('color', some_color);
    return this;
}

Используй это:

$('#my_div').colorize('green');

Этот простой пример объединяет лучшее из того, как создать базовый плагин в документах jQuery, и ответы от @Candide , @Michael .

• Назвал выражение функции может улучшить трассировки стека и т.д.
• Пользовательский метод, который возвращает, this может быть связан . (Спасибо @Potheek.)

Вы всегда можете сделать это:

jQuery.fn.extend({
   myfunction: function(param){
       // code here
   },
});
OR
jQuery.extend({
   myfunction: function(param){
       // code here
   },
});
$(element).myfunction(param);

Похоже, вы хотите расширить объект jQuery с помощью его прототипа (он же пишет плагин jQuery ). Это будет означать, что каждый новый объект, созданный посредством вызова функции jQuery ( $(selector/DOM element)), будет иметь этот метод.

Вот очень простой пример:

$.fn.myFunction = function () {
    alert('it works');
};

демонстрация

Простейшим примером создания любой функции в jQuery является

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something here*/}