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 相关文章推荐
jq选项卡鼠标延迟的插件实例
May 13 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
javascript中scrollTop详解
Apr 13 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
js实现漫天星星效果
Jan 19 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 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
PHP一些有意思的小区别
2006/12/06 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Python提取频域特征知识点浅析
2019/03/04 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python的pip有什么用
2020/06/17 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
班会关于环保演讲稿
2013/12/29 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
入团申请书格式
2019/06/20 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
vue 给数组添加新对象并赋值
2022/04/20 Vue.js