跟我一起學寫jQuery插件開發方法（附完整實例及下載）
2024-05-06 14:10:41
供稿：網友
很多公司的前端設計開發人員都是女孩子，而這些女孩子很多JavaScript技能都不是很好。而前端開發過程中，JavaScript技能又是必不可少的。所以，如果前端小MM正在為某個JavaScript效果發愁的時候，你瀟灑的過去，然后對她說：“嗨，美女，用這個吧。這是我寫的一個jQuery插件?！蔽蚁牖旧夏愕娜松笫戮湍芎芸旖鉀Q。
先想好做個什么功能
這是第一步，也是很重要的一步，鑒于咱們都是剛學習寫jQuery插件，所以，這個功能一定要簡單一些。不要想一口就吃個胖子，咱也吃不了。咱還是撿個瘦的下手吧。但是，這個功能也不能太無聊，如果無聊到幾乎沒用處，就算做好了也是扔到馬桶里，不會持續更新，也便不會持續進步了。
我最終選擇的是：美化表格，讓表格的奇偶行顏色不同，然后鼠標移到某行上，某行可以高亮顯示。功能簡單又實用，不錯，不錯。呵呵～～
不急著寫，先想想實現原理
還不急，先想想實現原理。必要的時候，先寫出簡單的實現的原型。
我的這個美化表格的例子，實現原理倒是簡單，無非就是找到表格的奇偶行，然后添加不同的class，活動行高亮顯示也很簡單，只要判斷mouseover事件，然后添加一個class，mouseout的時候，再去掉這個class即可。
一個通用的框架
在動手寫自己的jQuery插件之前，自然是先研究一下別人寫的插件了。其實寫jQuery也基本有一個通用的框架。行，那咱也把這框架照搬過來吧。
代碼如下:
(function($){
$.fn.yourName = function(options){
//各種屬性、參數
}
var options = $.extend(defaults, options);
this.each(function(){
//插件實現代碼
});
};
})(jQuery);
有了這個，咱就可以往里面套東西了。
名號、參數和屬性
好不容易開始闖蕩江湖了，一定要有一個響亮的名號才行，這樣走在江湖上，才能夠屌，夠威風。不信，你聽聽人家“中國牙防組”！所以，咱這里一定要起個響亮的名號，一定要簡單、明了、夠權威。所以，決定了，就叫做“tableUI”了！
參數和屬性也很簡單，無非就是三個class的名稱。就叫做：evenRowClass、oddRowClass和activeRowClass吧。
所以，上面的框架，咱就把上半身給填上了。
代碼如下:
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
//實現代碼
});
};
})(jQuery);
這里重點說一下這一句：
代碼如下:
var options = $.extend(defaults, options);
看上去很屌的一句，其實就是合并多個對象為一個。這里就是，如果你在調用的時候寫了新的參數，就用你新的參數，如果沒有寫，就用默認的參數。想進一步了解的朋友，可以參考jquery的官方文檔： http://api.jquery.com/jQuery.extend/
