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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery实现全选按钮
Jan 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
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
使用js 设置url参数
2013/07/08 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
在Python中处理XML的教程
2015/04/29 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python判断两个对象相等的原理
2017/12/12 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
如何理解python对象
2020/06/21 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
C语言编程练习
2012/04/02 面试题
JPA的特点
2014/10/25 面试题
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书