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

jQuery库旨在加速JavaScript开发。通过简化编写JavaScript的方式，它可以帮助您减少编写代码。使用jQuery库时，您可能会发现您为通用功能重写了相同的代码。在这种情况下，这可能是您编写自己的自定义jQuery插件的原因。jQuery插件使您可以使用自定义代码扩展jQuery库。您可以将插件用于任何重复功能。例如，许多插件可用于幻灯片放映以及下拉菜单和手风琴...

cuyi7076

1587人浏览 · 2020-06-27 22:02:22

cuyi7076 · 2020-06-27 22:02:22 发布

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`关键字

(function($) {
  $.fn.accordion = function() {
    return this.each(function() {
      // Using return allows for chainability
    });
  };
})(jQuery);

使用清单3中的代码，示例手风琴插件可用于方法调用链中。借助可链接性（jQuery的另一个强大功能），您的插件可以在方法调用链中使用。例如，以下代码显示了如何在单个方法调用链中淡出HTML元素，然后将其从文档对象模型（DOM）中删除。

$("#my-div").fadeOut().remove();

构造手风琴

典型的手风琴设计包括标题栏和相关的内容区域。定义列表是用于手风琴的绝佳HTML结构。 dt元素用于标题， dd元素用于内容区域。清单4中HTML结构是一个定义列表，其中包含四个标题及其对应的内容区域。

清单4.一连串方法调用

<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
    <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
    <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
    <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
    <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

清单4中的定义列表还分配了一个名为accordionCSS类。在没有应用任何CSS的情况下，这种手风琴的结构看起来类似于图1的准系统设计。

图1.没有应用任何CSS的手风琴结构

accordion类用于将样式应用于整体定义列表，标题和内容区域。在清单5的示例中， accordion类本身应用了宽度，边框，字体系列和字体大小。您可以修改任何后续CSS示例，以包括自己的自定义样式，例如颜色，字体系列，大小和间距。

清单5.用于定义整体定义列表样式的Accordion CSS类

.accordion {
  width: 500px;
  border: 1px solid #ccc;
  border-bottom: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

然后，您可以使用accordion CSS类定义标题（ dt ）和内容（ dd ）的样式。标题和内容都包含共享样式，这些样式定义了底部边框并将margin设置为0，这使标题栏和内容区域可以紧紧地靠在一起，如清单6所示。

清单6.与手风琴的标题和内容区域相关的共享样式

.accordion dt, 
.accordion dd {
  border-bottom: 1px solid #ccc;
  margin: 0px;
}

为了使dt元素看起来更像标题栏，请设置背景色并添加指针光标，以便用户可以看到标题栏是可单击的。这些类中包括各种其他样式，例如填充，字体大小和字体粗细。 dd元素添加了填充，以使描述与标题之间有一些间隔。清单7显示了一个示例。

清单7.与手风琴的标题和内容区域相关联CSS类

.accordion dt {
  background: #eaeaea;
  cursor: pointer;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: bold;
}
.accordion dd {
  padding: 12px 8px;
}

添加了所有CSS后，视觉效果将更加完整和类似手风琴，如图2所示。

图2.应用了自定义CSS的手风琴结构

自定义编码插件

要制作功能手风琴，您必须将自定义代码应用于在上一节中开始创建的jQuery插件功能。手风琴插件首先循环遍历所有已定义的手风琴。要定义手风琴，请在HTML文档中或在外部嵌入JavaScript文件中使用以下jQuery。

$('dl#my-accordion').accordion();

对于每个手风琴，都可以使用jQuery的children方法访问关联的定义标题，该方法返回一个数组或dt元素。将click事件应用于dt元素，然后将名为reset的方法应用于每个dt 。当手风琴第一次加载时， reset方法将折叠所有dd元素。 click dt元素或标题栏时， click事件会触发名为onClick的自定义方法。定制的onClick方法在手风琴中查找所有dt元素。它调用一个自定义的hide方法，该方法通过使用next方法在dt元素旁边找到dd元素来隐藏每个关联的dd元素，然后将其向上滑动以使其关闭动画。

毕竟dd元件被隐藏，则dd与相关联的元件点击dt使用该元件变得可见slideDown方法，并创建一个伸缩动画，如清单8中的代码的最后一行中onClick方法是return false ，这确保任何单击的标题栏都不会表现出其通常的行为。例如，如果您使用anchor元素作为标题栏，则您将希望return false这样就不会将用户定向到另一个页面或现有页面的一部分。

清单8.用于创建jQuery插件的自定义手风琴函数

(function($) {
  $.fn.accordion = function(options) {
    return this.each(function() {
      var dts = $(this).children('dt');
      dts.click(onClick);
      dts.each(reset);
    });
	
    function onClick() {
      $(this).siblings('dt').each(hide);
      $(this).next().slideDown('fast');
      return false;
    }

    function hide() {
      $(this).next().slideUp('fast');
    }

    function reset() {
      $(this).next().hide();
    }
  }
})(jQuery);

当此手风琴插件与您先前创建HTML定义列表结构相关联时，将应用手风琴功能。使用手风琴功能，当单击一个标题栏或dt元素时，将打开其内容区域，并关闭所有其他打开的内容区域。换句话说，一次只能打开一个内容区域。

默认值和选项

jQuery插件可以包含默认值和选项。选项本质上是可以传递给插件的参数。除了发送多个参数外，还可以使用选项将一个参数作为对象文字发送，这是标准的jQuery做法。在插件中允许使用选项时，最佳做法是使用defaults对象设置默认选项。像选项一样，默认值是一个对象文字，应包含允许您传递给插件的属性。

例如，如果您允许在首次加载手风琴时可用于打开该手风琴的第一个内容区域的属性，则应在插件中包括open属性的默认值。在插件中使用默认值来确定默认功能，并使用选项来覆盖默认值。当插件收到选项时，可以使用$.extend方法进行实际的覆盖。 jQuery的$.extend方法合并两个或更多对象。清单9中的示例显示了使用$.extend方法将用户定义的选项与自定义jQuery插件中的默认选项合并的常见做法。

清单9.向自定义手风琴jQuery插件添加选项和默认值

(function($) {
  $.fn.accordion = function(options) {
    var settings = $.extend({}, {open: false}, options);
    return this.each(function() {
      var dts = $(this).children('dt');
      dts.click(onClick);
      dts.each(reset);
      if(settings.open) $(this).children('dt:first-child').next().show();
    });
	
    function onClick() {
      $(this).siblings('dt').each(hide);
      $(this).next().slideDown('fast');
      return false;
    }

    function hide() {
      $(this).next().slideUp('fast');
    }

    function reset() {
      $(this).next().hide();
    }
  }
})(jQuery);

$.extend方法参数是一个目标对象和两个或多个要合并的对象。在该示例中，目标对象是一个空对象文字，它充当合并对象的容器。目标将成为一个包含合并对象值的单个对象，在本例中为settings变量。第二个参数是包含默认插件属性的对象文字。第三个参数是用户定义的选项参数。要在HTML元素上使用手风琴插件传递选项，您需要先了解插件的哪些属性，然后才能将其作为对象文字传递，如下所示。

$('dl#my-accordion').accordion({open:true});

在清单9的示例中，传递给插件的选项将通过$.extend方法覆盖默认值。如果未传递任何选项，则使用默认值。对于示例插件，您可以使用open属性来确定第一个内容区域在加载时是否应该处于打开状态。

可重用性

您可以在任何HTML文档中重用示例手风琴插件，并且可以在单个HTML文档中多次使用它。您可以包括多个手风琴结构，就像已经创建的那样，并使用您创建的新手风琴插件将每个手风琴结构分别定义为jQuery。要将多个手风琴添加到HTML文档中，只需添加所需的任意多个手风琴结构即可。清单10中的代码包括两个以段落分隔的手风琴结构。

清单10.在同一HTML文档中使用多个手风琴

<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
  <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
  <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<dl class="accordion" id="my-accordion2">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
</dl>

清单10中的两个手风琴结构除了内容，更重要的是ID值外，几乎是相同的。第一结构包括my-accordion的ID值。第二结构包括ID值my-accordion2 。这些结构现在可以彼此独立地作为目标。例如，以下jQuery脚本使用您创建的新插件将每个手风琴结构定义为一个手风琴。

$('dl#my-accordion').accordion({open:true});
$('dl#my-accordion2').accordion({open:true});

定义了两个手风琴结构，默认情况下第一个面板设置为打开。图3显示了在同一HTML文档中使用多个手风琴插件的示例。

图3.同一HTML文档中使用的多个手风琴结构

把它放在一起

创建新的自定义jQuery手风琴插件，编写CSS，并放置HTML标记后，您可以将它们放到最终的Web页面中。要使jQuery手风琴插件正常工作，您必须嵌入jQuery库。我更喜欢使用内容交付网络（CDN），该网络根据用户的地理位置交付图书馆，并依次以最快的方式交付文件。 Google在其CDN上包括了jQuery库，您可以使用URL https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js将文件嵌入到网页中。

该库的其他版本也可用。请参阅相关信息的链接，该库在谷歌的开发者网站。您需要在HTML文档中引用的唯一其他文件是为手风琴和jQuery手风琴插件设置样式CSS文件。之后，将转换实际手风琴结构HTML标记。清单11显示了一个示例。

清单11.将两个手风琴结构定义为jQuery手风琴

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Creating a Custom jQuery Plugin</title>
  <link type="text/css" rel="stylesheet" href="jquery.accordion.css" />
  <script type="text/javascript" 
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
  </script>
  <script type="text/javascript" src="jquery.accordion.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('dl#my-accordion').accordion({open:true});
    $('dl#my-accordion2').accordion({open:true});
});
</script>
</head>

<body>

<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
  <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
  <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<dl class="accordion" id="my-accordion2">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
</dl>

</body>
</html>