jquery自定义插件_创建一个自定义jQuery插件

jquery自定义插件

jQuery库旨在加速JavaScript开发。 通过简化编写JavaScript的方式，它可以帮助您减少编写代码。 使用jQuery库时，您可能会发现您为通用功能重写了相同的代码。 在这种情况下，这可能是您编写自己的自定义jQuery插件的原因。

jQuery插件使您可以使用自定义代码扩展jQuery库。 您可以将插件用于任何重复功能。 例如，许多插件可用于幻灯片放映以及下拉菜单和手风琴菜单。 如果您搜索jQuery插件，您将找到大量可在自己的项目中使用的示例（并查看它们的构建方式）。

常用缩写

• CSS：级联样式表
• HTML：超文本标记语言

在本文中，学习如何快速创建自定义jQuery插件。 示例代码和分步说明向您展示了如何创建jQuery手风琴插件。 如果您了解jQuery，并准备将您的技能提高到一个新的水平，那么本文对您来说是完美的。

您可以下载本文中使用的示例的源代码。

先决条件

本文假定您对JavaScript，jQuery和级联样式表有基本的了解。 请参阅相关主题 ，以了解更多有关这些先决条件。

入门

jQuery是扩展JavaScript语言的库。 创建jQuery插件时，实际上是在扩展jQuery库，而jQuery库又在扩展JavaScript本身。 要真正了解您的插件如何扩展jQuery库，就需要了解JavaScript prototype属性。 尽管未直接使用它，但JavaScript prototype属性是通过jQuery属性fn在后台使用的，该属性是本机JavaScript prototype属性的jQuery别名。

要创建一个新的jQuery插件使用fn财产，只是一个插件名称分配给fn属性，并将其指向新的功能将充当构造函数，类似于普通JavaScript。 清单1中的代码显示了如何通过使用jQuery对象和fn属性并将其分配给新的构造函数来定义一个名为accordion的新jQuery插件。

清单1.定义一个新的名为手风琴的jQuery插件

jQuery.fn.accordion = function() {
  // Add plugin code here
};

清单1显示了一种创建jQuery插件的方法。 该示例在功能上没有任何问题。 但是，推荐的创建jQuery插件的方法是首先创建一个包装器函数，该函数使您可以使用美元符号（ $ ）。 默认情况下，美元符号可能会导致与其他JavaScript框架发生冲突。 如果将插件包装在一个函数中，则与其他JavaScript框架和美元符号的使用都不会发生冲突。 清单2中的示例代码显示了如何将包装函数应用于jQuery插件定义。

清单2.在包装函数中包装一个新的名为手风琴的jQuery插件

(function($) {
  $.fn.accordion = function() {
    // Add plugin code here
  };
})(jQuery);

在清单2中，将jQuery关键字应用于wrapper函数，该函数使您可以像使用fn属性时那样在插件中使用美元符号。 使用包装器功能后，您可以在整个插件中的任何位置使用美元符号代替jQuery关键字，而不会干扰其他第三方插件。 此选项提供了一种在整个插件中编写更少代码的方法，并有助于使您的插件代码更清洁，更易于维护。

保持可链接性

jQuery的一个优点是它使您可以使用任何类型的选择器。 但是，必须记住，您的插件可以处理几种不同的元素类型。 使用this关键字使您的插件可以通过访问循环中的每个元素（无论元素类型如何）来应用关联的功能。 如果在each循环的前面使用return关键字，则可以使用插件保持可链接性。 清单3显示了分配给函数处理程序并与return关键字组合的each循环。

清单3.在each循环前面使用return关键字