1、导入jquery-1.4.1.js文件于WebRoot路径下
2、在JSP页面引入该文件的路径
3、编写JavaScript的代码，实现css效果。
4、实例（1）：----CSS效果
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
function hide(){
$("#ping1").hide();
}
function show(){
$("#ping1").show();
}
function fadeOut(){
$("#ping2").fadeOut(2000);
}
function fadeIn(){
$("#ping2").fadeIn(2000);
$("div p").toggle(1000);
}
function slideDown(){
$("#ping3").slideDown(2000);
}
function slideUp(){
$("#ping3").slideUp(2000);
$("div p").slideToggle(1000);
}
</script>
<style type="text/css">
#ping1{
500px;
height: 150px;
background: #fff000;
color: red;
}
#ping2{
500px;
height: 150px;
background: lightgreen;
color: red;
}
#ping3{
500px;
height: 150px;
background: red;
color: red;
}
</style>
</head>
<body>
<div id="ping1">
<p>隐藏或显示</p>
</div>
<input type="button" value="隐藏" onclick="hide()"/> <input type="button" value="显示" onclick="show()" />
<br/>
<div id="ping2">
<p>淡入或淡出</p>
</div>
<input type="button" value="淡出" onclick="fadeOut()"/> <input type="button" value="淡入" onclick="fadeIn()" />
<br/>
<div id="ping3">
<p>收起或挂出</p>
</div>
<input type="button" value="收起" onclick="slideUp()"/> <input type="button" value="挂出" onclick="slideDown()" />
<br/>
</body>
实例（2）：----用户验证
1、编写Servlet：（Java文件）
public class CheckUserName extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
@SuppressWarnings("static-access")
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username=request.getParameter("username");
System.out.println("获取到的用户名是："+username);
String info="该用户名可以使用！";
if("junlin".equals(username)){
info="该用户名已经被使用！";
}
try {
Thread.currentThread().sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
response.setContentType("text");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print(info);
out.flush();
out.close();
}
}
（2）、编写JSP页面
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//获取用户输入的Jquery对象
var $username=$("#username");
//获取验证的URL
var url="<%=basePath%>servlet/CheckUserName";
//绑定数据源s
$username.bind("blur",function(){
var v=$.trim($username.val());
var sd="username="+v;
//方式一：通过Ajax
/* $.ajax({
type:"POST",
url:url,
data:sd,
dataType:"text",
success:function(data){
$("#info").html(data);
}
});*/
//方式二：使用post
$.post(url,{"username":v},function(data){
$("#info").html(data);
});
});
//开始时ajax请求图片是隐藏的
$("#ajaxImgDiv").css("display","none");
$("#ajaxImgDiv").ajaxStart(function(){
$(this).css("display","block");
});
$("#ajaxImgDiv").ajaxComplete(function(){
$(this).css("display","none");
});
});
</script>
</head>
<body>
<form action="" method="post">
<table width="80%" border="1">
<tr>
<td>用户名：</td>
<td><input type="text" name="username" id="username"></td>
<td><div id="info" style="color: red;font-size: 12px;"></div></td>
</tr>
<tr>
<td>密 码:</td>
<td><input type="password" name="password"></td>
<td> </td>
</tr>
</table>
</form>
<div id="ajaxImgDiv"><img src="imgs/loading.gif" /></div>
</body>