jQuery对表单、表格的操作及更多应用

一、单行文本框应用——获取和失去焦点改变样式

$(function(){
        $(":input").focus(function(){
              $(this).addClass("focus");
        }).blur(function(){
               $(this).removeClass("focus");
        });
});

二、多行文本框应用
1、高度变化

$(function(){
    var $comment=$('#comment');     //获取评论框
    $('.bigger').click(function(){           //"放大"按钮绑定单击事件
        if(!$comment.is(":animated")){        //判断是否处于动画
            if($comment.height()<500)
             {  //重新设置高度，在原有的基础上加50
                $comment.animate（{height:"+=50"},400）；
             }
         }
    })  

   $('.smaller').click(function(){           //"缩小"按钮绑定单击事件
        if(!$comment.is(":animated")){        //判断是否处于动画
            if($comment.height()>50)
             {  //重新设置高度，在原有的基础上减50
                $comment.animate（{height:"-=50"},400）；
             }
         }
    });    

});

2、滚动条高度变化

$(function(){
    var $comment=$('#comment');     //获取评论框
    $('.up').click(function(){           //"向上"按钮绑定单击事件
        if(!$comment.is(":animated")){        //判断是否处于动画
            $comment.animate({scrollTop:"-=50"},400);
         }
    })  

   $('.smaller').click(function(){           //"缩小"按钮绑定单击事件
        if(!$comment.is(":animated")){        //判断是否处于动画
             $comment.animate({scrollTop:"+=50"},400);
         }
    });    

});