jQuery - Plugins - 極客書

插件是一段用標準JavaScript文件編寫的代碼。這些文件提供了有用的jQuery方法，可以與jQuery庫方法一起使用。

有很多jQuery插件可供您從存儲庫連結下載，網址是：https://jQuery.com/plugins。

How to use Plugins

爲了使插件的方法對我們可用，我們在文檔的<head>中包含了與jQuery庫文件非常相似的插件文件。

我們必須確保它出現在主jQuery源文件之後，以及自定義JavaScript代碼之前。

下面的示例演示如何包含jquery.plug-in.jsplugin−

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://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>

How to develop a Plug-in

編寫自己的插件非常簡單。下面是創建方法的語法−

jQuery.fn.methodName = methodDefinition;

這裡，methodNameM是新方法的名稱，method definition是實際的方法定義。

jQuery團隊推薦的指導原則如下&負;

附加的任何方法或函數的結尾都必須有分號（;）。
除非另有明確說明，否則方法必須返回jQuery對象。
您應該使用this.each遍歷當前匹配的元素集-這樣會生成乾淨且兼容的代碼。
在文件名前面加上jquery，然後加上插件名，最後加上.js。
始終將插件直接附加到jQuery而不是$，這樣用戶就可以通過noConflict（）方法使用自定義別名。

例如，如果我們編寫一個要命名爲debug的插件，則此插件的JavaScript文件名爲−

jquery.debug.js

使用jquery.前綴可以消除與用於其他庫的文件的任何可能的名稱衝突。

Example

下面是一個小插件，它具有用於調試的警告方法。將此代碼保存在jquery.debug.jsfile−

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

下面是顯示warning（）方法用法的示例。假設我們將jquery.debug.js文件放在html頁面的同一目錄中。

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://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>

這將提醒您以下結果&負;