如何创建自定义 JQuery 函数以及如何使用它？

Question

我正在搜索相关信息 - “如何创建自定义（自己的）JQuery 函数以及如何使用它”

我在 Google 中搜索过，但没有找到相关信息。

你能详细解释一下自定义函数吗？

Answer 1

“自定义功能”我假设您的意思是“插件”。如果是这样的话，有一个很好的tutorial on the jQuery site。基本思路是这样的：

(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

正如手势所说，使用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    
};

Answer 7

假设你得到了下面的代码：

jQuery(document).ready(function($){
    function getFormData($form){
        var unindexed_array = $form.serializeArray();
        var indexed_array = {};

        $.map(unindexed_array, function(n, i){
            indexed_array[n['name']] = n['value'];
        });

        return indexed_array;
    }

    $("#form_name").submit(function (event) {
        var formData = getFormData($(this));
        console.log(formData);
        
        event.preventDefault();
    });
});

而且效果很好。但是如果你想把那个函数变成一个 jQuery 插件，你可以重写为：

jQuery(document).ready(function($){

    $.fn.getFormData = function() {
        var unindexed_array = this.serializeArray();
        var indexed_array = {};

        $.map(unindexed_array, function(n, i){
            indexed_array[n['name']] = n['value'];
        });

        return indexed_array;
    };

    $("#form_name").submit(function (event) {
        var formData = $(this).getFormData();
        console.log(formData);

        event.preventDefault();
    });
});

就是这样。您可以在官方JQuery documentation.中找到更多信息