jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide();
});
$("#show").click(function () {
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
基本语法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数，在显示或隐藏结束时调用。下面代码在1秒钟内隐藏内容：
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle()方法
使用toggle()方法，可以实现交替显示和隐藏内容，如：
$("button").click(function(){
$("p").toggle();
});
其基本语法如下：
$(selector).toggle(speed,callback);
可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数，在显示或隐藏结束时调用
分享到：
相关推荐
JQuery基础教程之第八章后续章节看我后续资源jquery全套教程： JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
JQuery基础教程之第五章后面章节请看我后续资源jquery全套教程： JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery...
JQuery基础教程之第七章后续章节看我后续资源jquery全套教程： JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
JQuery基础教程之第四章后续章节看我后续资源jquery全套教程： JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
JQuery基础教程之第六章后续章节看我后续资源jquery全套教程： JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
5.DOM window 官方网站：http://swip.codylindley.com/ 下载地址：http://swip.codylindley.com/jquery.DOMWindow.js 演示实例:http://swip.codylindley.com/DOMWindowDemo.html 6.shadowbox 官方网站：...
jquery框架最新版本:jquery-1.3.2.min.js
Bootstrap WYSIHTML5: http://jhollingworth.github.io/bootstrap-wysihtml5/ CKEditor: http://ckeditor.com/ Bootstrap Wizard: https://github.com/gilluminate/Bootstrap-Wizard Sparkline: ...
tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html 第三部分：效果 3.1 Shadow 阴影 实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html 3.2 Magnifier 放大 实例...
jquery最新版本 /*! * jQuery JavaScript Library v3.5.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzlejs.com/ * * Copyright JS Foundation and other contributors * Released under ...
《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年，作为Ajax领域最全面、实用的图书，一直深受读者的好评。全书主要分为三个...
教程概述 2:配置站点 3:jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:过滤...
Jquery智能提示完整全部版本 jquery&vsdoc1.4.0-2.1.0 jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js jquery-1.4.4-vsdoc.js jquery-1.4.4.min.js jquery-1.4.min.js jquery-1.5-vsdoc.js...
jQuery经典入门教程，供学习交流，谢谢~
效果描述： 蓝色大气的一款网页右侧...13份WPF经典开发教程 http://download.csdn.net/album/detail/1115 C#资料合辑二[C#桌面编程入门篇] http://download.csdn.net/album/detail/957 C#资料合辑一[C#入门篇] ...
所有效果说明：基本的鼠标互动：拖拽...//stilbuero.de/jquery/tabs_3/rotate.html 第三部分：效果 3.1 Shadow 阴影实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html 3.2 Magnifier 放大实例...
《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年，作为Ajax领域最全面、实用的图书，一直深受读者的好评。全书主要分为三个...
jQuery圣诞下雪花
jQuery入门,jQuery入门,jQuery入门,jQuery入门
jquery-3.1.1.min.js