jQuery插件的使用

更新时间：2021-09-01 10:34:35 来源：极悦浏览916次

如何使用插件

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

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

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

<html>
   <head>
      <title>The jQuery Example</title>		
      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

如何开发插件

这样自己写插件就很简单了。以下是创建 aa 方法的语法

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 = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

这会提醒您以下结果