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



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



function myfunction(param){
//some code
}


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



$('#my_div').myfunction()
796   13  

13 ответов:

С Docs:

(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, называются плагинами jquery и есть хорошее количество информации о создании в документах jquery.

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

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

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


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

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

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

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

    myfunction2: function () 
    {
    }
});

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

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

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

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

похоже, вы хотите расширить объект jQuery через его прототип (aka написать плагин 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*/}

создать метод" раскрасить":

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

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

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

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

Comments

    Ничего не найдено.