Question

我正在编写基于this documentation的第一个jQuery插件，我对此有疑问。这个特定的例子向您展示了如何将jQuery用作具有元素的方法，例如：

$("myelement").myfunction({title: blah});

但是，如何在没有元素的情况下将其用作独立功能？例如：

$.myfunction({title: blah});

当我这样做时，我得到“$ .myfunction不是函数”

谢谢！

编辑：当前代码：

(function( $ ){
  $.fn.tasks = function( options ) {

    var defaults = {
        'action'    : 'gettasks',
        'list'      : 'default',
        'task'      : '',
        'title'     : ''
    };

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

    return this.each(function() {

        var $this = $(this);
        var ajax_load = "<img class='loading' src='images/ajax-loader.gif' alt='loading...' />";
        var urlparams;

        if ( options.action == 'gettasks' ) {
            urlparams = "action=gettasks";
            urlparams += "&list="+options.list;
        }

        if ( options.action == 'getlists' ) {
            urlparams = "action=getlists";
        }

        if ( options.action == 'create' ) {
            urlparams = "action=create&list="+options.list+"&title="+options.title;
        }

        if ( options.action == 'update' ) {
            urlparams = "action=update&list="+options.list+"&taskid="+options.task;
        }


        $.ajax({
            url: "include/tasks_handler.php?"+urlparams,
            cache: false,
            beforeSend: function() {
                $this.html(ajax_load);
            },
            success: function(html){
                $this.html(html);
                if ( options.action == 'update' ) {
                    $("#taskList").tasks();
                }
            }
         });

    });
  };
})( jQuery );

Answer 1

将其定义为此类函数

$.myfunction = function(options){
   //method logic here
};

//Use it here
$.myfunction({title: blah});

但是这样，除非您从此方法返回jQuery对象，否则无法使用jQuery链接。

Answer 2

将您的功能添加到jQuery对象本身，而不是jQuery.fn。

e.g。

$.myfunction = function() { ... };

Answer 3

除了此处发布的其他答案，向您展示如何执行每种方式之外，这里要做的一个重要区别是：您应该使用$命名空间还是$.fn命名空间？

如果你看到jQuery的内部方法，它们会有以下区别。

$.fn用于操作DOM元素
$用于操作对象（数组，集合，POJO等），不了解DOM的存在。

Answer 4

是的。就这样做：

$.pluginName = function(/* arguments here */) {
   // Plugin Code here
}

Answer 5

您可以这样定义：

jQuery.myfunction = function(options) {
    alert(options.title);
};

并像这样调用：

$.myfunction({title: 'foo bar'});

结构使用jQuery作为函数和方法？

5 个答案: