操作的基本步骤：

（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>

JQuery中对各种域进行隐藏和显示操作的更多相关文章

  1. JavaScript中如何给按钮设置隐藏与显示属性

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...

  2. 简简单单，jquery中，使用checkbox控制div的显示与隐藏

    今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...

  3. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...

  4. jquery 查找元素，并判断隐藏或显示

    html <div class="panel-heading"> <h4 class="panel-title"> <a data ...

  5. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  6. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  7. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  8. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  9. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

随机推荐

  1. hibernate学习（1）——helloworld

    1. 框架体系结构 2. hibernate入门 2.1 ORM框架 Hibernate是一个数据持久化层的ORM框架. Object:对象,java对象,此处特指JavaBean Relationa ...

  2. 10与元素亲密接触：盒元素（the box model）

    line-height属性可以设置文本的行间距,可以用像素.em或百分比等于字体大小有关的值定义行间距line-height: 1.6em;(行间距为字体大小的1.6倍) CSS把每一个单一的元素看作 ...

  3. 如何在Rails中执行Get/Post/Put请求

    require 'open-uri' require 'json' require 'net/http' class CoupleController < ApplicationControll ...

  4. SQL ORDER BY 子句

    ORDER BY 语句用于对结果集进行排序. ORDER BY 语句 ORDER BY 语句用于根据指定的列对结果集进行排序. ORDER BY 语句默认按照升序对记录进行排序. 如果您希望按照降序对 ...

  5. Ajaxupload.js上传插件使用

    注意一下火狐,360IE78下的坑: 返回过来的response在不同浏览器下的字符串不一致 // response(chrome):<pre style="word-wrap: br ...

  6. centos7 yum安装mysql5.7并在root密码忘记的情况下重设密码

    CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源   1 $ wget http://repo.mysql ...

  7. 【整理】虚拟机和主机ping不通解决办法

     检查几个方面: 1.检查虚拟网卡有没有被禁用2.检查虚拟机与物理机是否在一个VMNet中3.检查虚拟机的IP地址与物理机对应的VMNet是否在一个网段4.检查虚拟机与物理机的防火墙是否允许PING, ...

  8. JQuery + XML作为前后台数据交换格式实践

    JQuery + xml作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ xml作为一种 ...

  9. jquery判断页面是否滑动到最底部

    // 滚动到底部,向下的箭头消失 var $down = $('.down'); var $window = $(window); var $document = $(document); $wind ...

  10. linux----------纯净的centos7.0上安装lnmp环境的步骤

    1.先看下screen -S lnmp 命令是否存在,不存在则安装.这个是个什么东东呢?百度一下( GNU Screen是一款由GNU计划开发的用于命令行终端切换的自由软件.用户可以通过该软件同时连接 ...