JQuery中的行条纹效果

    用JQuery操作CSS给行添加效果，能够很简单的实现华丽的界面。该效果的实现还是体现在JQuery强大的选择器上。

    在此以简单实例为大家呈现：

    1).奇数行和偶数行颜色交替

        该实例主要使用了JQuery的两个选择符":odd"和":even",具体用法如下：

        <script type="text/javascript">
             $().ready(function(){
                 $('div p:odd').addClass('odd');//给div中是奇数行的p添加名为odd的类
                 $('div p:even').addClass('even');//给div中是偶数行的p添加名为even的类
             });
       </script>
       <style type="text/css">
                .odd{background-color:red;}
                .even{background-color:blue;}
       </style>

       应当注意的是第一行是从0开始的。

      2).连续n行颜色不同

       假设连续3行的颜色不同，实现代码如下：

       $().ready(function(){

           $('div p').each(function(index){

               $(this).addClass(className[index%3]);

           });

       });

       var className=['one','two','three'];

       <style type="text/css">
                .one{background-color:red;}
                .two{background-color:blue;}

                .three{backfround-color:yellow}
       </style>

      3).每n行变换一下颜色

       假设n=3，即实现每连续3行变换一下颜色。

                  $().ready(function(){

                  var className = 'even'; 
                  $('div p').each(function(index){

                      if(index%3 == 0){className =(className =='even'?'odd':'even');}

                      $(this).addClass(className);

                 });                  

            });

     若将以上代码稍微变化：      

            $().ready(function(){

               $('div p').each(function(index){

                    var className = 'even'; 

                     if(index%3 == 0){className =(className =='even'?'odd':'even');}

                     $(this).addClass(className);

                 });                  

            });

      就会得到另一种效果。

      若对index参数不甚了解，请参见我的上一篇拙作。

      总结：以上只是最基本的集中情况，若对其代码稍加变化就能够得到其他不同的效果。

      初学JQuery，有错误及不足之处请不吝赐教。