衆所周知，各種瀏覽器對於HTML、CSS以及原生JS的支持不盡相同。但是jQuery很好地封裝了各種瀏覽器不同的實現，能夠很好地解決跨瀏覽器的CSS問題。下面就是在review表單操作的時候的一個DEMO，記錄在這個地方，方便後面做項目的時候查找使用，這個如果添加動畫效果會更好，jQuery所有的動畫效果都是可以通過animate函數來實現。
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("input[type!='button'],textarea").focus(function(){
$(this).addClass("onfocus");
}).blur(function(){
$(this).removeClass("onfocus");
});
$(".opeTextArea").toggle(function(){
$(this).text("max");
$("textarea").width(400).height(120);
},function(){
$(this).text("min");
$("textarea").width(200).height(60);
});
});
</script>
<style type="text/css">
.onfocus{
border:solid red 2px;
background-color:grey;
}
textarea{
width:200px;
height:60px;
}
.resumeContainer{
width:200px;
}
.opeTextArea{
color:white;
background-color:black;
margin:2px;
padding: 2px 6px;
}
</style>
</head>
<body>
<form action="#" method="get">
<label for="name">name:</label>
<input type="text" name="name"><br/>
<label for="password">password:</label>
<input type="password" name="password"><br/>
<label for="qq">QQ:</label>
<input type="text" name="qq"><br/>
<label for="resume">resume:</label>
<div class="resumeContainer">
<span class="opeTextArea">min</span>
<textarea rows="3" cols="10"></textarea>
</div>
<input type="button" value="submit"><br/>
</form>
</body>
</html>