SOURCE

$(":input").focus(function(){

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

                $(this).removeClass("focus");
            })



$(function(){

            var $comment = $("#comment");//获取评论宽

            $(".bigger").click(function(){//放大按钮
                var height = $comment.height();//当前评论框高度
                var number = 50;//增量
                if(!$comment.is(":animated")){//判断是否处于动画
                    if( height < 500){
                        //重新设置高度
                        //$comment.height(height + number);
                        //清空当前正在执行动画，然后在加入动画
                        $comment.stop(true).animate({height: height + number},300);
                    }
                }

            });

            $(".smaller").click(function(){//缩小按钮
                var height = $comment.height();//当前评论框高度
                var number = 50;//减量
                if(!$comment.is(":animated")){//判断是否处于动画
                    if( height > 50){
                        //重新设置高度
                        //$comment.height(height - number);
                        //清空当前正在执行动画，然后在加入动画
                        $comment.stop(true).animate({height: height - number},300);
                    }
                }
            });
        });

$(".up").click(function(){//向上翻一页
                var height = $comment.height();//当前评论框高度
                if(!$comment.is(":animated")){//判断是否处于动画
                    if( height > 50){
                        //清空当前正在执行动画，然后在加入动画
                            $comment.stop(true).animate({scrollTop: "-="+height},300);

                    }
                }
            });

            $(".down1").click(function(){//向下翻一页
                var height = $comment.height();//当前评论框高度
                if(!$comment.is(":animated")){//判断是否处于动画
                        //清空当前正在执行动画，然后在加入动画
                        $comment.stop(true).animate({scrollTop: "+="+height},300);

                }
            });



$(function(){
    //全选/全不选
     $("#CheckedAll").click(function(){//
       $('[name=items]:checkbox').prop('checked', this.checked);
    });
     //反选
     $("#CheckedRev").click(function(){
          $('[name=items]:checkbox').each(function(){
            //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
            //$(this).attr("checked", !$(this).prop("checked"));
            //$(this).prop("checked", !$(this).prop("checked"));

            //直接使用JS原生代码，简单实用
            this.checked=!this.checked;
          });
     });
     //输出值
    $("#send").click(function(){
        var str="你选中的是：\r\n";
        $('[name=items]:checkbox:checked').each(function(){
            str+=$(this).val()+"\r\n";
        })
        alert(str);
    });
  })
$(function(){//网页加载时

    $("[name=items]:checkbox").click(function(){
        var flag = true;
        $("[name=items]:checkbox").each(function(){
            if(!this.checked){
                flag = false;
            }
        });
        $("#CheckedAll").prop("checked",flag);
    });

    $("#CheckedAll").click(function(){
         $('[name=items]:checkbox').prop('checked', this.checked); 
    });
})



$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"500px",width:"200px"},3000).css("border","5px solid blue");

http://www.cnblogs.com/lhb25/p/amazing-jquery-effects.html
http://blog.csdn.net/li286487166/article/category/6185883
<form action="" method="post" id="regForm">
        <fieldset>
            <legend>个人基本信息</legend>
                <div>
                    <label  for="username">名称:</label>
                    <input id="username" type="text" />
                </div>
                <div>
                    <label for="pass">密码:</label>
                    <input id="pass" type="password" />
                </div>
                <div>
                    <label for="msg">详细信息:</label>
                    <textarea id="msg" rows="2" cols="20"></textarea>
                </div>
        </fieldset>
    </form>
<form>
    <div class = "msg">
        <div class="msg_caption">
            <span class="bigger">放大</span>
            <span class="smaller">缩小</span>
        </div>
        <div>
            <textarea id="comment" rows="8" clos="20">
            多行文本框高度变化
            多行文本框高度变化
            多行文本框高度变化
        多行文本框高度变化多行文本框高度变化多行文本框高度变化
          </textarea>
      </div>
      </div>
</form>

<form action="" method="post" id="regForm">
        你爱好的运动是？<br/>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <input type="checkbox" name="items" value="排球" />排球

        <input type="button" id="CheckedAll"  value="全选"/>
        <input type="button" id="CheckedNo"  value="全不选"/>
        <input type="button" id="CheckedRev"  value="反选"/>
        <input type="button" id="send"  value="提交"/>        
    </form>
<br/>
<br/>

.focus { 
     border: 1px solid #f00;
     background: #fcc;
}
   
input:focus , textarea:focus{
        boreder: 1px solid #f00
        background: #fcc;
    }
* { 
    margin:0; /*外边距0px*/
    padding:0;/*内边距0px*/
    font:normal 12px/17px Arial; /*字体颜色，默认，字体大小，字体*/
}
/*定义消息显示区*/
.msg {
    width:300px; /*宽度300px*/
    margin:100px; /*定义外边距100px*/
}
/*定义消息中的标题*/
.msg_caption { 
    width:100%;  /*宽度100%，此处就是300px*/
    overflow:hidden; /*溢出范围就会自动裁剪*/
    margin-bottom:1px;/*内底边距1px*/
}
/*定义消息菜单选项*/
.msg_caption span { 
    display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
    float:left;  /*浮动在左边*/
    margin:0 2px; /*外边距上下为0左右2px*/
    padding:4px 10px; /*内边距上下为4px左右10px*/
    background:#898989; /*背景颜色*/
    cursor:pointer;/*鼠标的形状，手形*/
    color:white; /*字体颜色*/
}
/*定义消息文本域*/
.msg textarea{ 
    width:300px; /*宽度300px*/
    height:80px;/*高80px*/
    border:1px solid #000;/*边框大小1px，边框粗细 solid 边框颜色 黑色*/
}