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

jQuery Plugin - How to add / bind events

本文关键字：添加 绑定 事件 插件 何添加 jQuery      更新时间：2023-09-26

好的，这是我第一次尝试创建一个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);

用于更改所提供元素的文本颜色。然而。我想为插件生效的元素添加功能。例如悬停或单击事件。但我现在还不能接受这个想法，因为selector可以是任何东西。所以我不像通过普通的jQuery方法那样可以硬编码一些特定的东西。

有了那个，我如何在渲染后添加那种类型的功能?

创建插件时，很容易把事情弄得过于复杂，所以尽量让事情保持简单美观。

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

第一个使用原始代码(NO SIGNIFICANT CHANGES MADE):

$.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 ) {

评论:

$.tippedOff和$.fn.tippedOff之间的差异是巨大的!将您的插件添加到$.fn命名空间而不是$命名空间将防止您必须提供selector，并使生活更简单。

我个人喜欢这个答案，@Chad说:

我的经验法则是:使用$。当它与DOM无关(如ajax)时，使用$.fn。当它操作由选择器抓取的元素(如DOM/XML元素)时

原始代码:

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

改变:

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

评论:

使用if语句是多余的。.extend()为你做了所有的工作。

原始代码:

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});
});

评论:

使用return this.each(function(){})是良好的实践，并保持链通性。不仅如此，您将不再需要担心selector的长度。

*注意:如果你想添加额外的事件，那么在你的插件中使用不同的methods: jQuery Doc Reference - Authoring Plugins

我希望这对你有帮助，如果你有任何问题请告诉我!

我没有足够的声望点来评论并完全同意Dom的观点，他非常有知识。我只想在更改的代码中添加，最好通过使用var关键字创建一个本地变量:
var $this = $(this);
这将使插件更好，并允许您将插件应用于页面中的多个元素，例如:
$('#testX').tippedOff2();
$('#testY').tippedOff2();
$('#testZ').tippedOff2();

相关文章：