jquery中show()、hide()和toggle()用法实例


Posted in Javascript onJanuary 15, 2015

本文实例讲述了jquery中show()、hide()和toggle()用法。分享给大家供大家参考。具体分析如下:

这里介绍了jquery效果:show()方法、hide()方法和toggle()方法
现实应用场景:QQ面板里我的好友分组

<html>

<head>

<title>jquery效果:show()方法、hide()方法和toggle()方法</title>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $("#show").click(function(){

  $("p").show();

 });

 $("#hide").click(function(){

  $("p").hide(2000);

 });

 $("#tog").click(function(){

  $("p").toggle("slow");

 });

});

</script>

</head>

<body>

<button id="show">显示</button><button id="hide">隐藏</button><button id="tog">切换</button>

<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

</body>

</html>

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

Javascript 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
angular之ng-template模板加载
Nov 09 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
vue实现循环切换动画
Oct 17 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 #Javascript
jquery果冻抖动效果实现方法
Jan 15 #Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 #Javascript
js实现遮罩层弹出框的方法
Jan 15 #Javascript
jquery隔行换色效果实现方法
Jan 15 #Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 #Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 #Javascript
You might like
NOT NULL 和NULL
2007/01/15 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
javascript jQuery插件练习
2008/12/24 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
Python解析微信dat文件的方法
2020/11/30 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
开朗女孩的自我评价
2014/02/10 职场文书
服装店营销方案
2014/03/10 职场文书
初三学生个人自我评定
2014/04/06 职场文书
常务副总经理任命书
2014/06/05 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
小学生作文评语集锦
2014/12/25 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
社会实践活动总结格式
2015/05/11 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers