如何创建简单的 jQuery 插件？

Posted 2023-02-21

【中文标题】如何创建简单的 jQuery 插件？

【英文标题】：How to create simple jQuery plugin?

【发布时间】：2012-07-05 12:59:00

【问题描述】：

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

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

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

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

解决办法是什么？

【问题讨论】：

我在 Chrome 上测试过，似乎效果很好。

它有效。但不是应该的。当一个元素被点击时，所有应用了插件的元素也会移动。唯一应该移动的元素是被点击的元素。

嗯，这就是我检查的。我使用 $("#el1").moveDown("100px") 和 $("#el2").moveDown("100px") 将它应用于两个元素.当我单击一个元素时，只有那个元素移动了。

【参考方案1】：

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

npx create-jquery-plugin

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

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

阅读全文： How to Create JQuery plugin

原答案 Here i want to suggest steps to create simple plugin with arguments

【参考方案3】：

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

编辑： Here is working jsFiddle example.

---

插件：

(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>

【讨论】：

不错的插件人，我认为你错过了插件的关闭，无论如何真的很棒的工作。这是用于测试的fiddle。

谢谢伙计，我看到了关闭错误并对其进行了编辑。它开着； var defaults =