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

Posted 2023-02-19

【中文标题】如何创建自定义 JQuery 函数以及如何使用它？

【英文标题】：How to create custom JQuery function and how to use it?

【发布时间】：2012-03-21 23:50:24

【问题描述】：

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

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

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

【问题讨论】：

“自定义”jQuery 函数是什么意思？扩展框架？

docs.jquery.com/Plugins/Authoring queness.com/post/112/a-really-simple-jquery-plugin-tutorial authenticsociety.com/blog/jQueryPluginTutorial_Beginner 这些是来自 Google 搜索的前 3 个链接。那些不适合你吗？您的具体问题是什么？

你在找的是：***.com/questions/7456435/…吗？

定义“自定义函数”。它可能意味着许多不同的东西......例如“插件”或自定义事件处理程序

docs.jquery.com/Main_Page 点击“插件创作”

【参考方案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方法。

【讨论】：

是的，我的意思是这个。你能详细解释一下插件的使用方法和语法吗？提前致谢！

现在，当我知道要搜索什么时 - 没问题 - 插件，没有自定义功能。谢谢！

@Jordan - 你不能阅读人们提供给你的各种链接吗？这些信息中的信息比您从该答案中获得的信息要多得多。但是，我已经编辑了一些关于发生了什么的解释。

【参考方案2】：

正如手势所说，使用extend()。您可以将自己的属性和函数添加为值：

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

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

【参考方案3】：

你可以这样使用它

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

【参考方案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);

【参考方案5】：

对于那些根据标题寻找“自定义功能”的人来说，它很简单：

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

这将像 $.ajax() 那样工作

【参考方案6】：

我希望像$.myfunction() 一样调用我的自定义函数。我在一个外部 js 文件中定义了这些函数，有点像这样

$.myfunction = function()

//Your code here    
;

【参考方案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.中找到更多信息