JQuery中对各种域进行隐藏和显示操作
操作的基本步骤：
（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>
有些梦想是遥不可及的，除非你坚持！
