Как создать пользовательскую функцию JQuery и как ее использовать?

Question

Я ищу информацию об этом - «Как создать пользовательскую (собственную) функцию JQuery и как ее использовать»

Я искал в Google, но не нашел информации об этом.

Можете ли вы объяснить подробнее, о пользовательских функциях?

Answer 1

Под "пользовательской функцией" я предполагаю, что вы имеете в виду "плагин". Если это так, то на сайте jQuery есть хорошее руководство по . Основная идея такова:

(function($) {
    $.fn.myPlugin = function() {
        return this.each(function() {
            //Do stuff
        });
    };
}(jQuery));

По сути, приведенный выше код делает несколько вещей. Во-первых, он захватывает значение jQuery и передает его в анонимную функцию, где его затем можно назвать $ (это так, что пользователи вашего плагина, которые случайно используют идентификатор $ для чего-то другого все еще может использовать его.)

Затем он объявляет метод для $.fn, который является просто псевдонимом для $.prototype. Внутри этого метода this относится к согласованному набору элементов, для которых был вызван плагин. Так как это объект jQuery и может содержать несколько элементов, вам нужно выполнить итерацию по этому набору (вот почему each есть).

Оператор return используется для поддержания цепочки подключаемого модуля с другими методами jQuery. Поскольку each возвращает экземпляр jQuery, плагин сам возвращает экземпляр jQuery, и другие методы jQuery, очевидно, могут вызываться для экземпляра jQuery.

Answer 2

Как сказал gesutery, используйте extend().Вы можете добавить свои собственные свойства и функции в качестве значений:

        $(function(){
            $.extend({
                propAsString: '',
                propAsNumber: 12345,
                propAsObject: {},
                propAsFunction: function() {
                    //your function code
                }
            });

        $.propAsFunction();     //call your function
        });

Answer 3

вы можете использовать это так

  $(document).ready(function() {
        $('#button').click(function(){
            $(this).myFunction();
         });
         $.fn.myFunction = function() { 
            alert('test'); 
         }
    });

Answer 4

(function($){
    $.fn.extend({ 
        //plugin name - animatemenu
        animateMenu: function(options) {

            //Settings list and the default values
            var defaults = {
                animatePadding: 60,
                defaultPadding: 10,
                evenColor: '#ccc',
                oddColor: '#eee'
            };

            var options = $.extend(defaults, options);

            return this.each(function() {
                var o =options;

                //Assign current element to variable, in this case is UL element
                var obj = $(this);              

                //Get all LI in the UL
                var items = $("li", obj);

                //Change the color according to odd and even rows
                $("li:even", obj).css('background-color', o.evenColor);             
                $("li:odd", obj).css('background-color', o.oddColor);                     

                //Attach mouseover and mouseout event to the LI  
                items.mouseover(function() {
                    $(this).animate({paddingLeft: o.animatePadding}, 300);

                }).mouseout(function() {
                    $(this).animate({paddingLeft: o.defaultPadding}, 300);
                });

            });
        }
    });
})(jQuery);

Answer 5

Для тех, кто ищет «пользовательскую функцию» в соответствии с заголовком, это просто:

if(window.$)
    window.$.customMethod = function() { * your code here * };

Это тогда будет работать как $.ajax() делает

Answer 6

Я хотел, чтобы мои пользовательские функции вызывались как $.myfunction(). Я определил эти функции во внешнем js-файле примерно так:

$.myfunction = function(){

//Your code here    
};