操作的基本步骤：

（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. 浏览器中Javascript单线程分析

    线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...

  2. TestNG的一个不足之处

    PS:本博客selenium分类不会记载selenium打开浏览器,定位元素,操作页面元素,切换到iframe,处理alter.confirm和prompt对话框这些在网上随处可见的信息:本博客此分类 ...

  3. XE系列资源文件的奇怪问题

    这是一个关于资源文件的故事.......-_- 今天写一个功能测试Demo, 为了省事直接在工程文件里Resources And Images里添加了几个图片, 类型都是默认的RCDATA 然后直接就 ...

  4. Multi-level Multi-select plugin

    Property file: Country[tab]City United States[tab]San Francisco United States[tab]Chicago Mexico[tab ...

  5. 并发队列ConcurrentLinkedQueue和阻塞队列LinkedBlockingQueue用法

    在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列(先进先出).Java提供的线程安全的Queue可以分为阻塞队列和非阻塞队列,其中阻塞队列的典型例子是BlockingQ ...

  6. JavaMail接、收邮件

    我总算把这个研究出来啦.... 不要觉得 代码有点多哈. 我们先来说发送邮箱吧,首先建立一个属性文件*.properties sys.properties server=smtp.163.com ## ...

  7. Given an array where elements are sorted in ascending order, convert it to a height balanced BST.

    /** * Definition for binary tree * public class TreeNode { * int val; * TreeNode left; * TreeNode ri ...

  8. cat <<EOF用法

    转自:http://blog.csdn.net/apache0554/article/details/45508631 cat <<EOF和cat <<-EOF两个都是获取st ...

  9. python Shapely 使用指南

    翻译:http://toblerity.org/shapely/manual.html 引入包 from shapely.geometry import Point from shapely.geom ...

  10. 一般处理程序返回json

    一般处理程序:    public void ProcessRequest(HttpContext context)         {             string action = con ...