Question

我想构建一个简单的jQuery插件，但我不知道如何开始，我阅读了一些文章，甚至试图学习一些流行的插件的代码，但它让我更加困惑。

请给我一个入门模板。让我们说，为了示例，我应该得到一些东西，我可以这样称呼：

 $("a").myMessagePlugin();

现在，每当有人点击链接时，它应该只是弹出警报并显示该链接。

谢谢

Answer 1

每当您编写jQuery插件时，请确保返回jQuery对象，因为它有助于链接jQuery方法。

$.fn.myMessagePlugin = function(options) {
    return this.each(function(){
        //plugin logic here
        $(this).click( function() { 
           alert(this.href);
        });
    });
}

Answer 2

其他答案大多是正确的，但如果您想使用美元符号，请将其包装在匿名函数中并传递jQuery对象。否则，您将面临与其他库冲突的风险。

(function($) {
    $.fn.myMessagePlugin = function(options) {
        return this.click( function() { //jQuery object, to be returned
            alert(this.href); //html element
        });
    }
})(jQuery);

Answer 3

建议您指定undefined（我使用前面的示例作为基础，谢谢）

另一个好的做法是为选项定义默认值并使用$ .extend

扩展它们

(function($, undefined) {
    $.fn.myPlugin= function(options) {
        var opts = $.extend($.fn.myPlugin.defaults, options);

        return this.click( function() { //jQuery object, to be returned
            alert(this.href); //html element
        });
    }

    $.fn.myPlugin.defaults =  {
       "option1": 1,
       "option2": 2
    }
})(jQuery);

简单的jquery插件

3 个答案: