初学 jquery，请教前辈高手关于Jquery问题，下面这段为什么没效果，代码是想实现，表格中基数行一个颜色，偶数行一个颜色，但是不懂哪出错了，没有效果

下面这段为什么没效果，代码是想实现，表格中基数行一个颜色，偶数行一个颜色，但是不懂哪出错了，没有效果<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
   tr{
    background-color: #ccffff;
   }
   .alt{
    background-color: #fff;
   }
</style><script>
$(document).ready(function($){
  $('tr:even').addClass('alt');
});
</script></head>
<body>
  <h2>Shakespeare's plays</h2>
  <table>
    <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    <td></td>
    </tr>    <tr>
    <td>All's Well that Ends Well</td>
    <td>Comedy</td>
    <td>1601</td>
    </tr>    <tr>
    <td>Hamlet</td>
    <td>Comedy</td>
    <td>1604</td>
    </tr>    <tr>
    <td>Henry IV,Part I</td>
    <td>Hiostory</td>
    <td>1596</td>
    </tr>    <tr>
    <td>Henry V</td>
    <td>Hiostory</td>
    <td>1599</td>
    </tr>  </table>
</body>
</html>HTMLjQueryCSS

解决方案 »

  1.   

    哦，这样，是以后有用到Jquery都要引用进jq库吗
      

  2.   

    改成这样<style>
        .r{
         background-color: yellow;
        }
        .alt{
         background-color: blue;
        }
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
     $(document).ready(function(){
       $('tr:even').addClass('alt');
       $("tr:odd").addClass("r");
     });
     </script>
     
    </head>
     <body>
       <h2>Shakespeare's plays</h2>
       <table>
         <tr>
         <td>As You Like It</td>
         <td>Comedy</td>
         <td></td>
         </tr>
     
        <tr>
         <td>All's Well that Ends Well</td>
         <td>Comedy</td>
         <td>1601</td>
         </tr>
     
        <tr>
         <td>Hamlet</td>
         <td>Comedy</td>
         <td>1604</td>
         </tr>
     
        <tr>
         <td>Henry IV,Part I</td>
         <td>Hiostory</td>
         <td>1596</td>
         </tr>
     
        <tr>
         <td>Henry V</td>
         <td>Hiostory</td>
         <td>1599</td>
         </tr>
     
      </table>另外建议你css的样式名称不要和HTML的dom元素重名