jquery练习

1.过滤器

<table id="table1">
<tr><td>姓名</td><td>成绩</td></tr>
<tr><td>tom</td><td>100</td></tr>
<tr><td>jim</td><td>99</td></tr>
<tr><td>john</td><td>98</td></tr>
<tr><td>jason</td><td>97</td></tr>
<tr><td>aaa</td><td>97</td></tr>
<tr><td>平均分</td><td>98</td></tr>
</table>

   <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    //第一行是表头，所以显示大字体（fontSize=30），
    //最后一行是汇总，所以显示红色字体。
    //正文的前三行是前三名，所以显示大的字体（28）
    //表格的奇数行是黄色背景。
    
    
    $(function(){
    $("#table1 tr:first").css("font-size","30");//第一个tr字体为30
    $("#table1 tr:last").css("color","red");//最后一行字体为红色
    $("#table1 tr:gt(0):lt(3)").css("font-size","28");//正文的前三行是前三名，所以显示大的字体（28）
    $("#table1 tr:even").css("background","yellow"); //表格的奇数为黄色背景。
    
    });
    </script>

2.网页开关灯，滤镜

     $(function(){
        $("#btn1").click(function(){
         $("body").toggleClass("a");//切换样式,开关灯效果
         });
         
         $("#btn2").click(function(){
            $("body").toggleClass("dark");//变成黑白的滤镜效果
         });
          
          $("#table1 tr").click(function(){//点击变颜色
             $(this).css("background","red");
             $(this).siblings().css("background","yellow");
          });
         
         $("*").focus(function(){
           $(this).addClass("c");
         }).blur(function(){
             $(this).removeClass("c");
         });
        });
    </script>