jquery傻瓜基础教程之教你如何制作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();

})

哈哈哈我们的换色表格插件终于完成了，赶快动作做一下吧。