Jquery 简明教程

jQuery - Plugins

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

A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods.

有很多 jQuery 插件，可以从 https://jquery.com/plugins 的资源库链接下载。

There are plenty of jQuery plug-in available which you can download from repository link at https://jquery.com/plugins.

How to use Plugins

为了使我们能够使用插件的方法，我们需要在文档的 <head> 中包含一个与 jQuery 库文件非常类似的插件文件。

To make a plug-in’s methods available to us, we include plug-in file very similar to jQuery library file in the <head> of the document.

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

We must ensure that it appears after the main jQuery source file, and before our custom JavaScript code.

下面的示例展示如何包含 jquery.plug-in.js 插件——

Following example shows how to include jquery.plug-in.js plugin −

<html>
   <head>
      <title>The jQuery Example</title>

      <script type = "text/javascript"
         src = "https://www.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>

How to develop a Plug-in

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

This is very simple to write your own plug-in. Following is the syntax to create a a method −

jQuery.fn.methodName = methodDefinition;

其中，methodNameM 是新方法的名称，methodDefinition 是实际的方法定义。

Here methodNameM is the name of new method and methodDefinition is actual method definition.

jQuery 团队建议的准则如下——

The guideline recommended by the jQuery team is as follows −

Any methods or functions you attach must have a semicolon (;) at the end.
Your method must return the jQuery object, unless explicity noted otherwise.
You should use this.each to iterate over the current set of matched elements - it produces clean and compatible code that way.
Prefix the filename with jquery, follow that with the name of the plugin and conclude with .js.
Always attach the plugin to jQuery directly instead of $, so users can use a custom alias via noConflict() method.

例如，如果我们编写了一个我们想命名为 debug 的插件，我们的插件的 JavaScript 文件名是——

For example, if we write a plugin that we want to name debug, our JavaScript filename for this plugin is −

jquery.debug.js

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

The use of the jquery. prefix eliminates any possible name collisions with files intended for use with other libraries.

Example

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

Following is a small plug-in to have warning method for debugging purpose. Keep this code in jquery.debug.js file −

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

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

Here is the example showing usage of warning() method. Assuming we put jquery.debug.js file in same directory of html page.

<html>
   <head>
      <title>The jQuery Example</title>

      <script type = "text/javascript"
         src = "https://www.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 would alert you with following result −

This is paragraph
This is division