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实现百度登录框的动态切换效果
Apr 21 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jquery实现拖拽小方块效果
Dec 10 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
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP制作万年历
2015/01/07 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP实现简单日历类编写
2020/08/28 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python字符串判断密码强弱
2020/03/18 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
小学敬老月活动方案
2014/02/11 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
大学生交通专业求职信
2014/09/01 职场文书
警察群众路线整改措施
2014/09/26 职场文书
初中家长评语大全
2014/12/26 职场文书
布达拉宫的导游词
2015/02/02 职场文书
小学教代会开幕词
2016/03/04 职场文书
2019大学生实习报告
2019/06/21 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python