JQuery练习demo1(隔行变色)

1.效果如图：

　　

2.代码：

 

代码

   
     

    
      
    
      <!
    
      DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    
      >
    
      


    
      <
    
      html 
    
      xmlns
    
      ="http://www.w3.org/1999/xhtml"
    
      >
    
      

    
      <
    
      head
    
      >
    
      
 
    
      <
    
      title
    
      ></
    
      title
    
      >
    
      
 
    
      <
    
      style 
    
      type
    
      ="text/css"
    
      >
    
      
 #tb
 
    
      {
    
      
 width
    
      :
    
      150px
    
      ;
    
      
 text-align
    
      :
    
      center
    
      ;
    
      
 
    
      }
    
      
 .tr_color
 
    
      {
    
      
 background-color
    
      :
    
      #888
    
      ;
    
      
 
    
      }
    
      
 
    
      </
    
      style
    
      >
    
      

 
    
      <
    
      script 
    
      src
    
      ="JQuery/jquery-1.4.2.js"
    
       type
    
      ="text/javascript"
    
      ></
    
      script
    
      >
    
      
 
 
    
      <
    
      script 
    
      type
    
      ="text/javascript"
    
      >
    
      
 $(document).ready(
    
      function
    
      () {
 
    
      //
    
       var $tr = $("tr");
    
      

    
      
 
    
      //
    
       for (var i = 0; i < $tr.length; i++) {
    
      

    
       
    
      //
    
       if (i % 2 == 0) {
    
      

    
       
    
      //
    
       $tr[i].style.backgroundColor = "#888";
    
      

    
       
    
      //
    
       }
    
      

    
       
    
      //
    
       }
    
      

    
      
 $(
    
      "
    
      tr:even
    
      "
    
      ).addClass(
    
      "
    
      tr_color
    
      "
    
      ); 
    
      //
    
      odd为奇书 even偶数
    
      

    
       });
 
    
      </
    
      script
    
      >
    
      

    
      </
    
      head
    
      >
    
      

    
      <
    
      body
    
      >
    
      
 
    
      <
    
      table 
    
      id
    
      ="tb"
    
      >
    
      
 
    
      <
    
      tbody
    
      >
    
      
 
    
      <
    
      tr
    
      ><
    
      td
    
      >
    
      第一行
    
      </
    
      td
    
      ></
    
      tr
    
      ><
    
      tr
    
      ><
    
      td
    
      >
    
      第一行
    
      </
    
      td
    
      ></
    
      tr
    
      >
    
      
 
    
      <
    
      tr
    
      ><
    
      td
    
      >
    
      第二行
    
      </
    
      td
    
      ></
    
      tr
    
      ><
    
      tr
    
      ><
    
      td
    
      >
    
      第二行
    
      </
    
      td
    
      ></
    
      tr
    
      >
    
      
 
    
      <
    
      tr
    
      ><
    
      td
    
      >
    
      第三行
    
      </
    
      td
    
      ></
    
      tr
    
      ><
    
      tr
    
      ><
    
      td
    
      >
    
      第三行
    
      </
    
      td
    
      ></
    
      tr
    
      >
    
      
 
    
      <
    
      tr
    
      ><
    
      td
    
      >
    
      第四行
    
      </
    
      td
    
      ></
    
      tr
    
      ><
    
      tr
    
      ><
    
      td
    
      >
    
      第四行
    
      </
    
      td
    
      ></
    
      tr
    
      >
    
      
 
    
      <
    
      tr
    
      ><
    
      td
    
      >
    
      第五行
    
      </
    
      td
    
      ></
    
      tr
    
      ><
    
      tr
    
      ><
    
      td
    
      >
    
      第五行
    
      </
    
      td
    
      ></
    
      tr
    
      >
    
      
 
    
      <
    
      tr
    
      ><
    
      td
    
      >
    
      第六行
    
      </
    
      td
    
      ></
    
      tr
    
      ><
    
      tr
    
      ><
    
      td
    
      >
    
      第六行
    
      </
    
      td
    
      ></
    
      tr
    
      >
    
      
 
    
      </
    
      tbody
    
      >
    
      
 
    
      </
    
      table
    
      >
    
      

    
      </
    
      body
    
      >
    
      

    
      </
    
      html
    
      >