Як створити функцію 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 = функція (param1, param2) {
        // цей - об'єкт jquery містить вибрані вами елементи
    }
}) (jQuery);

Назвіть це пізніше:

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

Так, методи, які ви застосовуєте до елементів, вибраних за допомогою jquery, називаються плагінами jquery, і в документах jquery є достатня кількість інформації про створення .

Варто зауважити, що jquery - це лише JavaScript, тому в "методі jquery" немає нічого особливого.

Створіть метод "розфарбовування":

$.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*/}