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中的deferred对象和extend方法详解
May 08 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jquery树形插件zTree高级使用详解
Aug 16 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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python使用knn实现特征向量分类
2018/12/26 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Python post请求实现代码实例
2020/02/28 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
python字典的值可以修改吗
2020/06/29 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
生产部岗位职责范文
2014/02/07 职场文书
职业生涯规划书前言
2014/04/15 职场文书
年终奖发放方案
2014/06/02 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2015年林业工作总结
2015/05/14 职场文书
总结几个非常实用的Python库
2021/06/26 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs