jQuery实现基本隐藏与显示效果的方法详解


Posted in jQuery onSeptember 05, 2018

本文实例讲述了jQuery实现基本隐藏与显示效果的方法。分享给大家供大家参考,具体如下:

jQuery 隐藏/显示

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

eg1:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>田XX,我爱你。</p>
<p>傻X,田XX。</p>
<p>滚X,田XX。</p>
</body>
<html>

运行结果:

jQuery实现基本隐藏与显示效果的方法详解

eg2:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>我爱你</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>姓名:田XX <br />
田大大<br />
田傻逼</p>
</div>
</body>
<html>

运行结果:

jQuery实现基本隐藏与显示效果的方法详解

jQuery toggle()

使用toggle()方法来切换hide()show()方法。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
 $("p").toggle();
 });
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是个段落</p>
</body>
<html>

运行结果:

jQuery实现基本隐藏与显示效果的方法详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
基于jquery实现二级联动效果
Mar 30 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 #jQuery
jQuery常见的遍历DOM操作详解
Sep 05 #jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 #jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
详解jQuery中的easyui
Sep 02 #jQuery
You might like
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
22点关于jquery性能优化的建议
2014/05/28 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python中join和split用法实例
2015/04/14 Python
python得到电脑的开机时间方法
2018/10/15 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
详解Python传入参数的几种方法
2019/05/16 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
2015年办公室主任工作总结
2015/04/09 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers