如何创建简单的 jQuery 插件？

Question

这个测试插件，应该是这样工作的：当一个元素被点击时，它会向下移动。 就那么简单。

jQuery.fn.moveDown = function(howMuch){
    $(this).css("border", "1px solid black");
    $(this).click(function(){

        $(this).css("position", "relative");
        $(this).animate({top: '+='+howMuch});
    }); 
}

问题是，当一个元素被点击时，它不仅会移动被点击的元素，还会移动应用了插件的所有其他元素。

解决方案是什么？

Answer 1

对于插件创作，请尝试这种方式，更加可靠：

编辑：这是有效的 jsFiddle 示例。

---

插入：

(function($){
    $.fn.extend({
        YourPluginName: function(options) {
                var defaults = {
                      howMuch:'600',
                      animation: '',//users can set/change these values
                      speed: 444,
                      etc: ''
                }
        };

       options = $.extend(defaults, options);

       return this.each(function() {
          var $this = $(this);              
          var button = $('a', $this);// this represents all the 'a' selectors;
                                            // inside user's plugin definition.

          button.click(function() {
            $this.animate({'top':options.howMuch});//calls options howMuch value
          });
       });
})(jQuery);

用户文档：

$(function() {
   $('#plugin').YourPluginName({
     howMuch:'1000' //you can give chance users to set their options for plugins
   });
});

<div id="plugin">
  <a>1</a>
  <a>2</a>
  <a>3</a>
</div>

Answer 2

在这里，我想建议创建带有参数的简单插件的步骤。

JS

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

        // Default params
        var params = $.extend({
            text     : 'Default Title',
            fontsize : 10,
        }, options);
        return $(this).text(params.text);

    }
}(jQuery));

在这里，我们添加了名为params的默认对象，并使用extend函数设置了选项的默认值。 因此，如果我们传递空白参数，那么它将设置默认值，否则它将设置。

HTML

$('.cls-title').myFirstPlugin({ text : 'Argument Title' });

阅读更多：如何创建 JQuery 插件

原始答案在这里，我想建议创建带参数的简单插件的步骤

Answer 3

如果您安装了 Node.js，则可以使用create-jquery-plugin CLI 实用程序。 赶紧跑

npx create-jquery-plugin

或者，您可以克隆jquery-plugin-boilerplate以开始使用。