jquery 简单的单击事件

来源:互联网 发布:迅龙数据恢复软件下载 编辑:程序博客网 时间:2024/06/06 08:41

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Untitled Document</title>
  <script type="text/javascript" src="../js/jquery.js"></script>
  <style>
  #testshow{
   border:#ccc 1px solid;background:#f1f1f1; width:250px; padding:10px; line-height:18px; font-size:12px;
  }
  .demoOver{background:#ccc;}
  .test{background:#0000FF;}
  
   
  </style>
  <script>
   
            $(document).ready(function(){
    
                   $(".testshow tr td").mouseover (function(){
                      $(this).addClass("demoOver")
                   });
    
       $(".testshow tr td").mouseout (function(){
                      $(this).removeClass("demoOver")
                   });
      
         $(".testshow tr td").click (function(){
       if($(this).hasClass("test")){
        
       $(this).removeClass("test");
       }
       else{
        
       $(this).addClass("test");
       }
      
                   });  
      
            });
    
   
  </script>
 
 </head>
 <body>
  <table class="testshow" border="1">
   <tr>
   <td >关于2009年度开放课题申请工作的…</td>
   </tr>
   <tr>
   <td >关于2009年度开放课题申请工作的…</td>  
   </tr>
   <tr>
   <td >关于2009年度开放课题申请工作的…</td>
   </tr>
   <tr>
   <td >关于2009年度开放课题申请工作的…</td>
   </tr>
   <tr>
   <td >关于2009年度开放课题申请工作的…</td>
   </tr>
   <tr>
   <td >关于2009年度开放课题申请工作的…</td>
   </tr>
   <tr>
   <td >关于2009年度开放课题申请工作的…</td>
   </tr>
  </table>
 </body>
</html>