jQuery 表格隔行换色和悬停换色

老规矩还是先导入jar包

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

<!--//创建一个table表-->

  <table border="1px" cellspacing="0px" cellpadding="0px">

   <tr><td><input type="checkbox" name="cb" id="cb" value="" /></td><td>张三</td><td>张三</td><td>张三</td><td>张三</td></tr>

   <tr><td><input type="checkbox" name="cb" id="cb" value="" /></td><td>张三</td><td>张三</td><td>张三</td><td>张三</td></tr>

   <tr><td><input type="checkbox" name="cb" id="cb" value="" /></td><td>张三</td><td>张三</td><td>张三</td><td>张三</td></tr>

   <tr><td><input type="checkbox" name="cb" id="cb" value="" /></td><td>张三</td><td>张三</td><td>张三</td><td>张三</td></tr>

   <tr><td><input type="checkbox" name="cb" id="cb" value="" /></td><td>张三</td><td>张三</td><td>张三</td><td>张三</td></tr>

   <tr><td><input type="checkbox" name="cb" id="cb" value="" /></td><td>张三</td><td>张三</td><td>张三</td><td>张三</td></tr>

  </table>

  <!--设置一个按钮-->

  <input type="button" id="xuan" value="获取选中复习框" />

  <!--//建立一个大盒子包裹住三个小盒子-->

  <div class="div0">

   <div class="div1">hello</div>

   <div class="div2">你好</div>

   <div class="div3">你好</div>   

  </div>

  <!--//调用script方法-->

  <script>

   //大div获得里面所以小div的内容

   var a = $("div > div");

   /*//隔行变色

   //even 偶数  从0开始

   //odd  奇数*/

   $("tr:even").css({"background":"red"});

   $("tr:odd").css({"background":"blue"});

   /*悬停变色*/

   /*奇数时悬停变色*/

   $("tr:even").hover(function(){

    $(this).css({"background":"green"});

   },function(){

    $(this).css({"background":"red"});

   });

   /*偶数时悬停变色*/

   $("tr:odd").hover(function(){

    $(this).css({"background":"black"});

   },function(){

    $(this).css({"background":"blue"});

   });

   /*获得文本内容*/

   /*var ds = $("div:contains('hello')");*/

   /*在控制台打印*/

   /*console.log(ds.text())*/

   

   //获得选择按钮的ID和click监听事件

   $("#xuan").click(function(){

    //得到选中的内容

    var xz = $("input[type=checkbox]:checked");

    //打印出来

    console.log(xz);

   });

  </script>