新手问jquery

<html>
<head>
<title>test</title>
<script language="javascript" src="jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
//$(document).ready(function(){$(this).click(function(){alert('V_V')})});
//$("tr").mouseover(function(){$("tr").css("background-color","red")});
$(document).ready(
function(){
   $("tr").mouseover(
     function(event){
$(event.target.parentNode).addClass("intro");
 }
   );
$("tr").mouseout(
function(event){
$(event.target.parentNode).addClass("outro");
}
);
  }
);
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
.outro
{
font-size:100%;
color:#000000;
}
</style>
</head>
<body>
<table width="800" border="1">
  <tr>
    <td>1</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>2</td>
    <td>4</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
    <td>3</td>
  </tr>
</table>
</body>
</html>上面代码的效果为什么只能用一次啊？

解决方案 »

  1.   

    $(document).ready( function(){
       $("tr").mouseover(
         function(event){
            $(event.target.parentNode).addClass("intro");
         }
          );
        $("tr").mouseout(
            function(event){
                $(event.target.parentNode).removeClass();
                //按你原来的写法，事件触发一遍以后，tr元素同时具有.intro、.outro，并且.outro定义的样式会覆盖.intro中定义的样式
            }
        );
      }
    );
      

  2.   

    $(document).ready( function(){
      $("tr").mouseover(
      function(event){
      $(event.target.parentNode).addClass("intro");
      }
      );
      $("tr").mouseout(
      function(event){
      $(event.target.parentNode).removeClass();
      //按你原来的写法，事件触发一遍以后，tr元素同时具有.intro、.outro，并且.outro定义的样式会覆盖.intro中定义的样式
      }
      );
      }
    );
      

  3.   

    实际上，你这段代码可以简化为：
    $(document).ready( function(){
        $("tr").mouseover( function() {
            $(this).addClass("intro");
        });
        $("tr").mouseout( function(){
            $(this).removeClass();
        });
    });