JQuery如何自訂外掛程式——$.fn的使用，jquery.fn
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中拿出來，然後用這些代碼製作成自己的輕量級外掛程式。
PS：附上一個非常漂亮的JQuery外掛程式庫：http://www.jq22.com/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
