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

Я знаю, что в JavaScript имеет следующий синтаксис:

function myfunction(param){
  //some code
}

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

$('#my_div').myfunction()
176
function javascript jquery

13 ответов

С Docs:

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

вы тут 

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

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

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

myFunction($('#my_div'));

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

62

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

// 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.

конечно, есть немного больше семантики, чем это (а также Лучшие практики, и все это джаз), поэтому убедитесь, что Вы читаете об этом.

33

чтобы сделать функцию доступной для объектов 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/

9

Yup - то, что вы описываете, является плагином 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 для полной истории.

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

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

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

стоит отметить, что jquery is просто javascript, поэтому нет ничего особенного в "методе jquery".

3

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

(function( $ ){
    $.fn.myFunc = function(param1, param2){
        //this - jquery object holds your selected elements
    }
})( jQuery );


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

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

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

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

    myfunction2: function () 
    {
    }
});

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

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

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

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

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

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

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

демо

0

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

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

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

создайте метод "colorize":

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

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

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

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

0