jQuery插件分为三种:
1.封装对象方法的插件(推荐)
调用在jQuery对象上的
jQuery对象.方法名();
95%以上的jQuery插件都是封装对象方法的插件
2.封装全局函数的插件
3.选择器插件
写插件的两个步骤
第一步:写出插件的模板代码,如下:
//插件的模板代码
;(function($) {
//这里写插件代码
})(jQuery);
第二步:封装jQuery对象方法的插件
;(function($) {
//这里写插件代码
//一.封装jQuery对象方法的插件
$.fn.extend({
"方法名": function(value) {
//这里写插件代码
}
});
})(jQuery);
接下来我们封装一个Color()颜色插件
;(function($) {
//这里写插件代码
//一.封装jQuery对象方法的插件
$.fn.extend({
"color": function(value) {
//这里写插件代码
if(value == undefined) {
return this.css("color");
} else {
return this.css("color", value);
}
}
});
})(jQuery);
简单的隔行变色插件
;(function ($) {
$.fn.extend({
"gehangChangeColor":function (arg,color,firstColor){
if(arg==undefined){
arg="even"
}
if(color==undefined){
color=$(this).css("background-color");
}
if(firstColor==undefined){
firstColor=color;
}else{
$(this).find("tbody tr:first").css("background-color",firstColor)
}
$(this).find("tbody tr:"+arg+"").css("background-color",color);
}
});
})(jQuery);