操作的基本步骤：
（1）导入jquery相关jar
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
（2）根据需求，进行方法实现：
1.需求：用a标签进行区域隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用法</title>
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});
</script>
</head>
<body>
<a>点我测试</a>
<div class="stuff">
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
这里就是要被隐藏的内容部分！
</div>
<!--
toggle是轮换的意思
相当于hide or show
也就是说如果p是隐藏的就让它显示 如果是显示的就让它隐藏
当然这个显示与隐藏是相对height的属性的
是通过调整元素的height属性来显示和隐藏元素
-->
</body>
</html>2.需求：点击某一超链接进行区域隐藏：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>animate</title>
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").toggle(function(){
$(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
},function(){
$(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
});
});
</script>
</head>
<body>
<a href="http://www.css rain.cn">
text
</a>
<div class="stuff">
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。</div>
</body>
</html>3.需求：点击复选框进行区域隐藏：
<%@ page contentType="text/html;charset=gbk"%>
<%@ taglib prefix="html" uri="/WEB-INF/struts-html.tld"%>
<html>
<head>
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ss").hide();
$("#check").click(function(){
$(".ss").slideToggle("slow");
});
});
</script>
<link href="../css/style.css" rel=stylesheet type=text/css>
<style type="text/css">
.th-left{
font-size:9pt;
font-family: 宋体;
color:black;
text-align:left;
background-color:#EFF3FF;
LINE-HEIGHT: 23px;
padding-right: 5px;
padding-left: 5px
}
</style>
</head>
<body class="body">
<table border="0" width="100%">
<tr>
<td colspan="7" width="100%">
<img name="topic" src="" width="980" height="120" alt=""
style="background-color: #333333">
</td>
</tr>
<tr>
<td colspan="7" width="100%" class="lth">
您当前的位置为:首页-->注册第一步-->注册第二步
</td>
</tr>
<tr>
<td colspan="7" width="100%" class="th">
<table>
<tr>
<td class="th"></td>
<td class="th">
<table>
<tr>
<td colspan="2" class="th" valign="top">
用户注册
</td>
</tr>
<tr>
<td class="th">
用户名:
</td>
<td class="th">
<input type="text" class="text" size="20">
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="th">
密 码:
</td>
<td class="th">
<input type="password" class="text" size="20">
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="th">
密码确认:
</td>
<td class="th">
<input type="password" class="text" size="20">
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="th">
Email:
</td>
<td class="th">
<input type="text" class="text" size="20">
<font color="red">*</font>
</td>
</tr>
<tr>
<td class="th">
高级内容
</td>
<td class="th-left">
<input type="checkbox" class="checkbox" id="check">
</td>
</tr>
</TABLE>
<div class="ss">
<table>
<tr>
<td class="th">
性别:
</td>
<td class="lth">
<input type="radio" type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女
</td>
</tr>
<tr>
<td class="th">
出生年月
</td>
<td class="lth">
<input type="text">
</td>
</tr>
<tr>
<td class="th">
地址
</td>
<td class="lth">
<input type="text">
</td>
</tr>
<tr>
<td class="th">形象照片</td><td class="th-left" valign="middle"><select><option>asdfasdfasdfasd</option></select> <img></td>
</tr>
<tr>
<td class="th">
安全问题
</td>
<td class="lth">
<select>
<option>
asdf
</option>
</select>
</td>
</tr>
<tr>
<td class="th">
回答答案
</td>
<td class="lth">
<input type="text">
</td>
</tr>
<tr>
<td class="th">
主页
</td>
<td class="lth">
<input type="text">
</td>
</tr>
<tr>
<td class="th">
QQ
</td>
<td class="lth">
<input type="text">
</td>
</tr>
<tr>
<td class="th">
身份证号
</td>
<td class="lth">
<input type="text">
</td>
</tr>
<tr>
<td class="th">
支付宝帐号
</td>
<td class="lth">
<input type="text">
</td>
</tr>
<tr>
<td class="th">
自我介绍
</td>
<td class="lth">
<textarea rows="5" cols="30"></textarea>
</td>
</tr>
<tr>
<td class="th">
个人箴言
</td>
<td class="lth">
<textarea rows="5" cols="30"></textarea>
</td>
</tr>
</table>
</div>
<tr>
<td class="th" colspan="7">
<input type="submit" value="确认" class="button">
<input type="reset" value="充填" class="button">
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="7" class="th">
<br>
Copyright 1994-2003 孙文涛
<br>
<b>关于SUN公司||联系我们||使用条款||隐私政策</b>
<br>
<br>
</td>
</tr>
</table>
</body>
</html>4.需求：鼠标事件，进行样式的改变：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>StripingTable</title>
<script src="jquery-1.1.3.pack.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){ //这个就是传说的ready
$(".stripe tr").mouseover(function(){
//如果鼠标移到class为stripe的表格的tr上时，执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加class值为over，并且当鼠标一出该行时执行函数
$(this).removeClass("over");}).click(function(){ //移除该行的class
$(this).toggleClass("click").removeClass("alt")})//点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,remove("alt").
$(".stripe tr:even").addClass("alt");
//给class为stripe的表格的偶数行添加class值为alt
});
</script>
<style>
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}
.click{background:yellow;}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://www.cssrain.cn" >Cssrain</a></td>
<td>cssrain</td>
<td>demo</td>
<td>可以发现超连接还是可以连接的，没有被 toggle和click占用</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>5.最普通的隐藏方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用法</title>
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'fast');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'fast');
});
});
</script>
</head>
<body>
<a>点我测试</a>
<div class="stuff">
英文详解
用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象
。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
[示例]:
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
[示例]:
$("p").animate({
left: 50, opacity: 'show'
}, 500);
[示例]:
一个使用“擦除”函数提供不同动画样式的例子。只有在一个插件可以提供这个“擦除”函数（jQuery库中默认只提供“linear”函数）的情况下才有效。
$("p").animate({
opacity: 'show'
}, "slow", "easein");
</div>
</body>
</html>
有些梦想是遥不可及的，除非你坚持！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
