手把手教新手写jquery插件(转自www.jqueryba.com)

用jquery好久了，平时注重速度，兼容的，用人家网上共享的插件多。

今天晚上就自己写个插件吧，便于以后方便查阅。

1，首先得想好需要什么功能，想实现神马？

最近逛淘宝商城，哦不，现在该叫天猫了，真不习惯啊，原来名字好好，改什么嘛。

刚写Jquery也不好写太复杂的，选个简单的，看中那天猫中的鼠标移动到图片那边透明度提高，移除图片透明降低，那个吧。

2，需要用到什么属性呢？

css需要opacity

javascript需要hover

3,人家的插件都有一个固定的框架，咱拿来吧

(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);

4，写参数，名称，

神马东东都得有个名字，才好方便，大家查找吧。So，就叫flickering吧。现在只是练手，不过多纠结名称了，想太多太纠结了。

参数属性就是加上class名称 hoverClass

5，开始套那个模版吧

 

(function($){
$.fn.flickering = function(options){
var defaults = {
hoverClass:"hover"
}
var options = $.extend(defaults, options);
this.each(function(){
//实现代码
});
};
})(jQuery);

6，下面就是jquery编写了，用到hover,addclass,removeclass,不熟悉可以参考jQuery API
(function($){
$.fn.flickering = function(options){
var defaults = {
hoverClass:"hover"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
$(thisTable).find("img").hover(
function(){
$(this).addClass(options.hoverClass);
},
function(){
$(this).removeClass(options.hoverClass);
}
);
});
};
})(jQuery);

7,呵呵，可以实现了吧。JQuery插件好了，其实还木有哦，我们看其他人家编写的插件，还有相关信息哦，比如名称版本 作者，我也弄吧，向网上大牛们靠近/*

* flickering 0.1
* Copyright (c) 2012 天外飞仙 http://jqueryba.com/
* Date: 2012-03-21 22:32
* 使用flickering可以方便地将鼠标移动到图片时透明度提高，移除透明度降低，突出鼠标放在那个图片的亮度
*/
(function($){
$.fn.flickering = function(options){
var defaults = {
hoverClass:"hover"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
$(thisTable).find("img").hover(
function(){
$(this).addClass(options.hoverClass);
},
function(){
$(this).removeClass(options.hoverClass);
}
);
});
};
})(jQuery);

8,第一次在这里写插件，有些理解的不深，包涵。

flickering插件地址

在线效果DEMO

原文地址 jquery http://www.jqueryba.com/83.html