实例讲解Jquery中隐藏hide、显示show、切换toggle的用法


Posted in Javascript onMay 13, 2016

本文实例为大家分享了jquery中show()、hide()和toggle()用法实例,供大家参考,具体内容如下

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>初识jQuery</title> 
<script src="http:/3water.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 
<!--引用这个jquery库--> 
 
<style> 
#test{ 
  display:none; 
  width:120px; 
  height:50px; 
  border:1px solid blue; 
   } 
</style> 
</head> 
   
  <body> 
    <div id="test">Hello world!</div> 
    <!--设置三个按钮,每次点击调用特定的函数--> 
    <button onclick="sayHello()">点我打开!</button> 
    <button onclick="sayGoodbye()">点我关闭!</button> 
    <button onclick="change()">点我切换!</button> 
     
    <script type="text/javascript"> 
      function sayHello(){ 
        $("#test").show(5000); 
      <!--设参数5000,表示用5000ms的时间完成这个动作-->  
      } 
       
       function sayGoodbye(){ 
        $("#test").hide(); 
      <!--不设置,默认速度--> 
      } 
       
       function change(){ 
        $("#test").toggle("slow"); 
      <!--设置以slow的速度打开--> 
      } 
    </script> 
  </body> 
</html>

效果图:

实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
js闭包用法实例详解
Dec 13 Javascript
jquery仿微信聊天界面
May 06 jQuery
详解webpack运行Babel教程
Jun 13 Javascript
AngularJS在IE8的不支持的解决方法
May 13 #Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 #Javascript
JavaScript String 对象常用方法详解
May 13 #Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 #Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 #Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 #Javascript
浅析JS操作DOM的一些常用方法
May 13 #Javascript
You might like
PHP扩展CURL的用法详解
2014/06/20 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
js实现密码强度检验
2017/01/15 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
用Webpack构建Vue项目的实践
2017/11/07 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
介绍一下linux文件系统分配策略
2013/02/25 面试题
个人简历中的自我评价怎么写
2014/01/26 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
医院志愿者活动总结
2015/05/06 职场文书
公司文体活动总结
2015/05/07 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电