jQuery - 插件

插件是一段用标准 JavaScript 文件编写的代码。这些文件提供了有用的 jQuery 方法，可以与 jQuery 库方法一起使用。

有很多 jQuery 插件可用，您可以从 https://jqueryjs.cn/plugins 的存储库链接下载。

如何使用插件

为了使插件的方法对我们可用，我们在文档的 <head> 中包含插件文件，这与 jQuery 库文件非常相似。

我们必须确保它出现在主 jQuery 源文件之后，以及我们自定义 JavaScript 代码之前。

以下示例显示了如何包含 jquery.plug-in.js 插件 -

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>

      <script src = "jquery.plug-in.js" type = "text/javascript"></script>
      <script src = "custom.js" type = "text/javascript"></script>
      
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            .......your custom code.....
         });
      </script>
   </head>
	
   <body>
      .............................
   </body>
</html>

如何开发插件

编写自己的插件非常简单。以下是创建方法的语法 -

jQuery.fn.methodName = methodDefinition;

这里 methodNameM 是新方法的名称，而 methodDefinition 是实际的方法定义。

jQuery 团队推荐的指南如下 -

您附加的任何方法或函数都必须在末尾带分号 (;)。
您的方法必须返回 jQuery 对象，除非明确说明了其他情况。
您应该使用 this.each 来迭代当前匹配元素的集合 - 通过这种方式可以生成简洁且兼容的代码。
以 jquery 为文件名前缀，然后是插件名称，最后以 .js 结尾。
始终将插件直接附加到 jQuery 而不是 $，以便用户可以通过 noConflict() 方法使用自定义别名。

例如，如果我们编写一个名为 debug 的插件，则此插件的 JavaScript 文件名为 -

jquery.debug.js

使用 jquery. 前缀消除了与旨在与其他库一起使用的文件发生任何可能的名称冲突。

示例

以下是一个用于调试目的的小型插件，具有警告方法。将此代码保存在 jquery.debug.js 文件中 -

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

以下示例显示了 warning() 方法的使用。假设我们将 jquery.debug.js 文件放在 html 页面的同一目录中。

实时演示

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script src = "jquery.debug.js" type = "text/javascript">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script>	
   </head>
	
   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>
</html>

这将向您发出以下结果的警报 -

This is paragraph
This is division

打印页面