jQuery 插件 .fn 问题

Question

我在创建 jquery 插件时似乎遇到了一些问题。我正在 firebug 控制台中测试一个简单的插件，但该功能并未按我的预期定义。这是我正在使用的代码模式

jQuery.fn.test = function () {console.log("runs")}

我试图通过此调用来调用该函数，但该函数不起作用。

$.test()

但是这个调用确实

$.fn.test()

我不认为这是它应该如何工作的，所以我认为我做错了什么，尽管所有文档似乎都同意我应该是正确的。有人有什么建议吗？

谢谢，科里

Answer 1

尝试$('div').test()!

给http://docs.jquery.com/Plugins/Authoring阅读有关 jQuery 插件的详细介绍。

<小时/>

好的，我在这里提供一些附加信息。创建插件时有三个近乎绝对的规则:

• 定义插件时始终使用匿名方法，以便确保使用 $ 获取 jQuery 对象。
• 始终尝试再次返回 jQuery 对象(用于链接)。
• 始终迭代元素，因为您的选择器可能匹配多个元素。

因此，为了惯例，请像这样开始:

(function($) {
  $.fn.test = function() {
    return this.each(function() {
      console.log("runs");
    });
  }
})(jQuery);

这将为您的选择器匹配的每个项目打印“runs”(如果您只使用div，则会打印很多)。尝试将 $(this).css('background-color', 'red'); 放入并看看会发生什么。

另一个值得一看的好地方是各种社交编码网站( GitHub 、 BitBucket 、 Google Code 等)并搜索“jQuery Plugin”以了解其他人是如何做的。