操作的基本步骤：

（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. principal-component-analysis

    http://support.minitab.com/en-us/minitab/17/topic-library/modeling-statistics/multivariate/principal ...

  2. P1941 飞扬的小鸟

    此题很容易写出方程,由以前的知识可以迁移得,本题可以用完全背包的方法进行优化,使用滚动数组即可得到答案. //莫名奇妙60分.不知道什么细节出了错. #include <bits/stdc++. ...

  3. 【转载】区间信息的维护与查询（一）——二叉索引树（Fenwick树、树状数组）

    在网上找到一篇非常不错的树状数组的博客,拿来转载,原文地址. 树状数组 最新看了一下区间的查询与修改的知识,最主要看到的是树状数组(BIT),以前感觉好高大上的东西,其实也不过就这么简单而已. 我们有 ...

  4. cucumber learning : http://www.cnblogs.com/puresoul/category/340832.html

    link Generate cucumber report by json website Sample as json file for cucumber report: [ { "key ...

  5. DataTable使用技巧总结【转】

    一.DataTable简介 ()构造函数 DataTable() 不带参数初始化DataTable 类的新实例. DataTable(string tableName) 用指定的表名初始化DataTa ...

  6. CDN缓存那些事

    CDN是什么? 谈到CDN的作用,可以用8年买火车票的经历来形象比喻: 8年前,还没有火车票代售点一说,12306.cn更是无从说起.那时候火车票还只能在火车站的售票大厅购买,而我所住的小县城并不通火 ...

  7. mysql数据库、表、字段、记录：增、删、改、查

    /* 结构:数据库.表.字段.记录 操作:增删改查 */ -- 1.数据库:增删改查 create datebase if not exists jkxy; drop database if exis ...

  8. App软件开发的完整在线流程（一看就懂）

    App软件开发其实并不复杂,完整的在线App开发不过9个步骤,一看就明白到底是怎么回事. 第一步:需求评估 在App项目正式启动前,客户应该对自己的需求进行评估,确认项目的开发周期和成本.登录APIC ...

  9. mysql 查表失败

    我们数据库迁移,我进数据库的目录都需要拷贝什么到新的数据库才可以用,我直接拷贝的库报错了[]北京- 2016/1/26 16:07:33 mysql> use payment;Database  ...

  10. Windows7中IIS简单安装与配置(详细图解)

    最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功.在博客里记录一下,给需要的朋友,也是给自己留个备份,毕竟我脑子不是很好使. 一.首先是安装IIS.打开控制面板, ...