制作jQuery插件(转)

首先我们先写一个jquery的匿名函数

<SCRIPT LANGUAGE="JavaScript">  
$(function(){  
      var alterColor = function(table){  
       $('tbody tr:odd',table).removeClass('even').addClass('odd');  
       $('tbody tr:even',table).removeClass('odd').addClass('even');  
      }  
   alterColor('#cnjquery);  
})  
</SCRIPT>  

这是一个最基本的写法 ，还没有做成 插件形式，主要就是让表格隔行换色。

这里我们可以发现 这个函数几乎没有什么通用性，下面我们来对她进行扩展。

<SCRIPT LANGUAGE="JavaScript">  
$(function(){  
 
   $.fn.alterColor = function(){  
     $('tbody tr:odd', this).removeClass('even').addClass('odd');  
     $('tbody tr:even', this).removeClass('odd').addClass('even');  
   }  
 
      $('#cnjquery').alterColor();  
 
})  
</SCRIPT>  

 

$(‘#cnjquery’).alterColor();

这样样子有点插件的意思了，但是我们会发现一个问题 这样写，不能链式操作，

也就是   $(‘#cnjquery’).alterColor().find("????")等

为什么呢？因为jquery在执行每个方法的时候 都会返回一个jquery对象 也就是我们只要加一个返回值就可以了
 

<SCRIPT LANGUAGE="JavaScript">  
$(function(){  
 
   $.fn.alterColor = function(){  
     $('tbody tr:odd', this).removeClass('even').addClass('odd');  
       $('tbody tr:even', this).removeClass('odd').addClass('even');  
       return this; //新增代码    }  
 
   $('#cnjquery).alterColor().find("tr").click(function(){  
        alert(1);//可以 链式操作 了。  
   });  
 
})  
</SCRIPT>  

现在我们看到可以链式操作了 到了这里我们的插件算是基本完成了，但是还有一个小小问题

也就是插件的参数都是死的 ，我们没有办法动态修改他的参数，这样应用起来就太不方便了，没有办法还需要继续改造

$(function(){  
    $.fn.alertColor = function(options) {  
       var defaults = {  
        odd : "red",  
         even : "blue" 
   };  
var o = $.extend(defaults, options);  
   return this.each(function() {  
   $('tbody tr:odd', this).removeClass(o.even).addClass(o.odd);  
         $('tbody tr:even', this).removeClass(o.odd).addClass(o.even);  
   return this;  
})   
   }  
 
    $('#cnjquery').alertColor({ odd : "cs"});  
// 或者 $('#cnjquery').alertColor({ odd : "red" , even : "blue"});  
// 或者 $('#cnjquery').alertColor();  
 
})