版權聲明：作者原創，轉載請註明出處！ 編寫插件的兩種方式: 1.類級別開發插件(1%) 2.對象級別開發(99%) 類級別的靜態開發就是給jquery添加靜態方法，三種方式 1.添加新的全局函數 2.使用$.extend(obj) 3.使用命名空間 類級別開發插件（用的非常少，1%） 分別舉例： 調 ...
版權聲明：作者原創，轉載請註明出處！
編寫插件的兩種方式:
1.類級別開發插件(1%)
2.對象級別開發(99%)
類級別的靜態開發就是給jquery添加靜態方法，三種方式
1.添加新的全局函數
2.使用$.extend(obj)
3.使用命名空間
類級別開發插件（用的非常少，1%）
分別舉例：
//1.直接給jquer添加全局函數 jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法。extend是jquery提供的一個方法，把多個對象合併起來，參數是object jQuery.extend({ myAlert2:function (str1) { alert(str1); }, myAlert3:function () { alert(11111); } }); //一定要註意兩種類級別編寫插件方式書寫的區別。 //3.使用命名空間(如果不使用命名空間容易和其他引入的JS庫裡面的同名方法衝突) jQuery.yuqing={ myAlert4:function (str) { alert(str); }, centerWindow:function (obj) { obj.css({ 'top':($(window).height()-obj.height())/2, 'left':($(window).width()-obj.width())/2 }); //必須進行返回對象的操作，否則就不能繼續往下進行鏈式操作了。。 return obj; } };
調用部分：
//調用自定義插件方法 $('#btn').click(function () { $.myAlert('我是調用jquery編寫的插件彈出的警告框'); $.myAlert2('我是調用jquery的extend()方法編寫的插件彈出的警告框'); $.myAlert3(); $.yuqing.myAlert4("調用使用了命名空間編寫的插件方法"); }); $.yuqing.centerWindow($('#div1')).css('background','red');
註意：jquery文件要一併引入。
對象級別開發插件（常用99%）
jquery官方給了一套對象級別開發插件的模板：
;(function ($) { $.fn.plugin=function (options) { var defaults={ //各種參數、各種屬性 };
//options合併到defaults上,defaults繼承了options上的各種屬性和方法,將所有的賦值給endOptions var endOptions=$.extend(defaults,options); this.each(function () { //實現功能的代碼 }); }; })(jQuery);
模板要點：
1.函數全部放在閉包里，外面的函數就調用不到裡面的參數了,比較安全
2.前面加分號,避免不必要的麻煩
舉個慄子：
需求：開發一個插件，要求奇數行顏色是yellow，偶數行顏色是green，滑鼠移到的行變為blue，移除變為原來的顏色
HTML佈局：
<table id="tab"> <tr> <th>姓名</th> <th>年齡</th> <th>身高</th> <th>體重</th> </tr> <tr> <td>張三</td> <td>22</td> <td>178cm</td> <td>79kg</td> </tr> <tr> <td>美美</td> <td>34</td> <td>167cm</td> <td>60kg</td> </tr> <tr> <td>小青</td> <td>23</td> <td>170cm</td> <td>55kg</td> </tr> <tr> <td>張三</td> <td>22</td> <td>178cm</td> <td>79kg</td> </tr> <tr> <td>美美</td> <td>34</td> <td>167cm</td> <td>60kg</td> </tr> <tr> <td>小青</td> <td>23</td> <td>170cm</td> <td>55kg</td> </tr> <tr> <td>張三</td> <td>22</td> <td>178cm</td> <td>79kg</td> </tr> <tr> <td>美美</td> <td>34</td> <td>167cm</td> <td>60kg</td> </tr> <tr> <td>小青</td> <td>23</td> <td>170cm</td> <td>55kg</td> </tr> </table>View Code
css樣式
table{ width: 100%; border-collapse: collapse; border: 1px solid palevioletred; } th,td{ height: 30px; text-align: center; border: 1px solid deeppink; } .evenRow1{background: yellow;} .oddRow1{background: green;} .curRow1{background: blue;}View Code
jquery調用代碼：
$('#tab').table({
evenRowClass:'evenRow1',
oddRowClass:'oddRow1',
curRowClass:'curRow1',
eventType1:'click'
});
jquery插件代碼：
1 ;(function ($) { 2 $.fn.table=function (options) { 3 var defaults={ 4 //各種參數、各種屬性 5 evenRowClass:'evenRow', 6 oddRowClass:'oddRow', 7 curRowClass:'curRow', 8 eventType1:'mouseover', 9 eventType2:'mouseout' 10 }; 11 12 var endOptions=$.extend(defaults,options); 13 14 this.each(function () { 15 var _this = $( this ); 16 _this.find('tr:even').addClass(endOptions.evenRowClass); 17 _this.find('tr:odd').addClass(endOptions.oddRowClass);
18 //滑鼠移入和移出，但實際開發中不直接使用mouseover這種方法 19 /*$(this).find('tr').mouseover(function () { 20 $(this).addClass(endOptions.curRowClass); 21 }).mouseout(function () { 22 $(this).removeClass(endOptions.curRowClass); 23 });*/ 24 25 //實際開發中要用bian()方法綁定 26 //因為用bind()方法綁定非常靈活，事件可以自己定義 27 //mouseover mouseout...事件底層都是用bind()去實現的，mouseout 等只是快捷方式 28 _this.find('tr').bind(endOptions.eventType1,function () { 29 $(this).addClass(endOptions.curRowClass); 30 }); 31 _this.find('tr').bind(endOptions.eventType2,function () { 32 $(this).removeClass(endOptions.curRowClass); 33 }) 34 }); 35 }; 36 })(jQuery);
插件註釋：
15行：var _this = this; 變數存儲，因為很多地方用到$(this);所以將其存儲為變數使用更加的方便，也提高了運行效率。
19-23行與28-33行實現的功能是相同的，但是推薦使用28-33行的寫法，使用bian()進行事件的綁定，因為使用會非常的靈活。
可變的地方，如樣式名稱等最好寫在defaults里，方便用戶自行配置。
再來一個對象級別實現jquery插件的慄子(⊙o⊙)哦！！實現選項卡功能~~
HTML佈局
<div id="tab"> <ul id="nav"> <li class="active">HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> </ul> <div id="cont"> <div style="display: block;">HTML</div> <div>CSS</div> <div>JAVASCRIPT</div> </div> </div>
css樣式：
* { margin: 0; padding: 0; } #nav li { list-style: none; float: left; height: 25px; line-height: 25px; border: 1px solid #0000FF; border-bottom: none; padding: 5px; margin: 10px; margin-bottom: 0; } #cont div { width: 210px; height: 150px; border: 1px solid #0000FF; margin-left: 10px; clear: both; display: none; } .active { background: #AFEEEE; }
調用的JS代碼
<script type="text/javascript"> $('#tab').tab({ tabType: 'mouseover' }); </script>
註意哦：不要忘記先引入jquery.js文件喔，然後在引入我們編寫的插件tab.js，才能正確調用到tab()方法。。。
插件tab.js
;(function($) { $.fn.tab = function(options) { var defaults = { tabActiveClass: 'active', tabNav: '#nav>li', tabCont: '#cont>div', tabType: 'click' }; var endOptions = $.extend(defaults, options); $(this).each(function() { var _this = $(this); _this.find(endOptions.tabNav).bind(endOptions.tabType, function() { $(this).addClass(endOptions.tabActiveClass).siblings().removeClass(endOptions.tabActiveClass); var index = $(this).index(); _this.find(endOptions.tabCont).eq(index).show().siblings().hide(); }); }); }; })(jQuery);
這個小慄子和上一個表格插件的慄子相似度是很高的，多敲幾遍，理解意思，其實jquery擴展插件並不難哦~~
如有不對的地方，還請各路大神賜教！
