JQuery如何自定義外掛——$.fn的使用
阿新 • • 發佈：2019-02-19
JQuery提供了很多多的外掛，粗略一搜，發現還不能用很多來形容：
點了幾個看了看，發現都相當精美，web開發需要的更多的是審美，而不是JS，只能說JS只是個基礎吧。
簡直是開發者的福音啊。但是，這麼多外掛有時候也並不是都滿足我們的需求，比如，有時候我們僅僅需要一個輪船的發動機，現在我們卻只有輪船，我們還需要把輪船拆開，或者有的時候我們需要的部件根本沒有，這時候，我們就需要自己動手啦。
例如，我以前寫過一個Tab控制元件，現在要把它做成外掛，讓我們來一起看下這個小Demo:
首先，寫單獨的JS檔案：
// JavaScript Document <span style="color:#FF0000;"><strong>//$.fn 是擴充套件外掛的方法</strong></span> (function($){ //形成閉包，將作用域進行限定 $.fn.miaovTab=function(){ var This=this; $(this).find('input').click(function(){ $(This).find('input').attr('class',''); $(This).find('div').fadeOut(); $(this).attr('class','active'); $(This).find('div').eq($(this).index()).fadeIn(); }); }; })(jQuery);
然後，我們在頁面中，加入如下程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQ外掛示例</title> <style> #div1 div{width:200px; height:200px; border:1px #000000 solid; display:none;position:absolute;} .active{background:red} </style> </head> <script type="text/javascript" src="E:\各類工程檔案\BS學習\jquery\jquery\jquery-1.7.2.min.js"> </script> <script language="JavaScript" type="text/javascript" src="JS外掛示例.js"></script> <script> $(function(){ $('#div1').miaovTab(); }); </script> <body> <div id="div1"> <input class="active" type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <div style="display:block">11111</div> <div>22222</div> <div>33333</div> </div> </body> </html>
當我們在瀏覽器中檢視時，可以點選3個按鈕，做出Tab的切換效果。
now,練習過製作外掛，當下次遇到不合適的外掛時，我們可以手寫或者將部分原始碼從Demo中拿出來，然後用這些程式碼製作成自己的輕量級外掛。