Javascript jQuery插件-如何添加/绑定事件

好的，这是我第一次尝试创建jQuery插件，所以我现在不学习教程了

到目前为止我已经

(function($)
{
    $.tippedOff = function(selector, settings)
    {
        var config = {
            'top':0,
            'left':0,
            'wait':3000
        };
        if(settings){$.extend(config, settings);}

        var $elem = $(selector);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
                $(this).css({"color":"#F00"});
            })
        }

        return this;
    };
})(jQuery);

用于更改所提供元素的文本颜色。然而。我想为插件生效的元素添加功能。例如悬停或单击事件。但是我现在还不能完全理解这个想法，因为

选择器可以是任何东西。因此，我不可能像通过普通jQuery方法那样，在每个语句中硬编码特定的内容

因此，在呈现之后，我该如何将这类功能添加到内容中呢？
在创建插件时，很容易使事情变得过于复杂，所以请尽量保持简洁

我已经为您提供了两个
tippedOff
插件的示例。下面是两个插件的示例

第一种方法按原样使用原始代码（未进行重大更改）：

然而，这是基于您的原始代码。基本上，我已经使用重建了您的原始代码。我个人会这样做。我还向您提供了以下所做更改的明细。（所做的重大更改）：

----------------------------------------
细分：
原始代码：

更改：

评论：

$.tippedOff
和
$.fn.tippedOff
之间的差异是巨大的！将插件添加到
$.fn
名称空间而不是
$
名称空间将避免您必须提供
选择器
，并使生活更加简单

我个人喜欢，其中@Chad表示：

我的经验法则是：使用美元。当它与DOM无关时（如ajax），请使用$.fn。当它对用选择器抓取的元素（如DOM/XML元素）进行操作时


原始代码：

更改：

评论：

如果有一个
if
语句是多余的。为你做所有的工作


原始代码：

更改：

评论：

使用
返回这个。每个（function（）{}）
都是很好的实践，可以保持链接性。不仅如此，您将不再需要担心
选择器的长度


*注意：如果要添加其他事件，请在插件中使用不同的
方法

我希望这有帮助，如果你有任何问题，请让我知道
 我没有足够的声望点来评论，完全同意多姆的观点，多姆非常博学。我只想补充一点，在更改后的代码中，最好使用var关键字创建local变量：

var$this=$（this）

这将使插件变得更好，并允许您将插件应用于页面中的多个元素，例如：

$（'#testX'）.tippedOff2（）

$（'testY'）.tippedOff2（）

$（'#testZ'）.tippedOff2（）
就像在插件之外一样<代码>$elem。单击（处理程序）
那么我会在下线时向元素添加类或ID或其他内容，以便执行类似操作吗？因此，有一个确定的东西可以作为选择器使用？您不需要选择器，您已经选择了元素。这可能是一个愚蠢的问题，但您是否遵循了这个-？这里很好地解释了启动所需的一切。理想情况下，您希望插件做什么？从这个示例中学到了很多。帮助我开始制作我的第一个插件。非常感谢。我喜欢你为我们其他人打破哥特的方式。
$.tippedOff = function(selector, settings)
    {
        var config = {
            'top':0,
            'left':0,
            'wait':3000
        };
        if(settings){$.extend(config, settings);}

        var $elem = $(selector);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
              //bind mouseenter, mouseleave, click event
                $(this).css({"color":"#F00"})
                .mouseenter(function(){
                  $(this).css({"color":"green"});
                })
                .mouseleave(function(){
                  $(this).css({"color":"#F00"});
                })
                .click(function(){
                  $(this).html('clicked');
                });

            })
        }

        return this;
    };

$.fn.tippedOff = function(settings) {
      var config = $.extend( {
          'top':0,
          'left':0,
          'wait':3000,
          'color': 'orange',
          'hoverColor': 'blue'
      }, settings);

      return this.each(function() {
          $this = $(this);
          $this.css({ 'color': config.color})
          .mouseenter(function(){
             $this.css({ 'color': config.hoverColor });
          })
          .mouseleave(function(){
             $this.css({ 'color': config.color });
          })
          .click(function(){
             $this.html('clicked');
          });
      });
    }

$.tippedOff = function(selector, settings) {

$.fn.tippedOff = function( settings ) { 

if(settings){$.extend(config, settings);}

var config = $.extend( {
          'top':0,
          'left':0,
          'wait':3000
      }, settings);

var $elem = $(selector);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
                $(this).css({"color":"#F00"});
            })
        }

        return this;

return this.each(function() {
          $this = $(this);
          $this.css({ 'color': config.color});
});