JQuery中对各种域进行隐藏和显示操作

时间：2023-03-08 19:02:12

操作的基本步骤：

（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="" width="100%">

            <tr>

                <td colspan="" width="100%">

                    <img name="topic" src="" width="" height="" alt=""

                        style="background-color: #333333">

                </td>

            </tr>

            <tr>

                <td colspan="" width="100%" class="lth">

                    您当前的位置为:首页-->注册第一步-->注册第二步

                </td>

            </tr>

            <tr>

                <td colspan="" width="100%" class="th">

                    <table>

                        <tr>

                            <td class="th"></td>

                            <td class="th">

                                <table>

                                    <tr>

                                        <td colspan="" class="th" valign="top">

                                            用户注册

                                        </td>

                                    </tr>

                                    <tr>

                                        <td class="th">

                                            用户名:

                                        </td>

                                        <td class="th">

                                            <input type="text" class="text" size="">

                                            &nbsp;

                                            <font color="red">*</font>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td class="th">

                                            密&nbsp;码:

                                        </td>

                                        <td class="th">

                                            <input type="password" class="text" size="">

                                            &nbsp;

                                            <font color="red">*</font>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td class="th">

                                            密码确认:

                                        </td>

                                        <td class="th">

                                            <input type="password" class="text" size="">

                                            &nbsp;

                                            <font color="red">*</font>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td class="th">

                                            Email:

                                        </td>

                                        <td class="th">

                                            <input type="text" class="text" size="">

                                            &nbsp;

                                            <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="男">

                                                    男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                                    <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>&nbsp;&nbsp;<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="" cols=""></textarea>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td class="th">

                                                    个人箴言

                                                </td>

                                                <td class="lth">

                                                    <textarea rows="" cols=""></textarea>

                                                </td>

                                            </tr>

                                        </table>

                                    </div>

                            <tr>

                            <td class="th" colspan="">

                                <input type="submit" value="确认" class="button">

                                <input type="reset" value="充填" class="button">

                            </td>

                            </tr>

                            </td>

                            </tr>

                    </table>

                </td>

            </tr>

            <tr>

                <td colspan="" class="th">

                    <br>

                    Copyright - 孙文涛

                    <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="" cellspacing="" cellpadding="">

<!--用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></td>

    <td></td>

    <td>gl.deng@gmail.com</td>

  </tr>

  <tr>

    <td>邓国梁</td>

    <td></td>

    <td></td>

    <td>gl.deng@gmail.com</td>

  </tr>

  <tr>

    <td>邓国梁</td>

    <td></td>

    <td></td>

    <td>gl.deng@gmail.com</td>

  </tr>

  <tr>

    <td>邓国梁</td>

    <td></td>

    <td></td>

    <td>gl.deng@gmail.com</td>

  </tr>

  <tr>

    <td>邓国梁</td>

    <td></td>

    <td></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: , opacity: 'show'

}, );

[示例]:

一个使用“擦除”函数提供不同动画样式的例子。只有在一个插件可以提供这个“擦除”函数（jQuery库中默认只提供“linear”函数）的情况下才有效。 

$("p").animate({

  opacity: 'show'

}, "slow", "easein");

    </div>

</body>

</html>