实例讲解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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
JavaScript脚本性能的优化方法
Feb 02 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
第一篇初识bootstrap
Jun 21 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
node.js操作mysql简单实例
May 25 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
vuex的简单使用教程
Feb 02 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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中static,const与define的使用区别
2013/06/18 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
删除重复数据的算法
2006/11/23 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
详解Vue中状态管理Vuex
2017/05/11 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
python中对list去重的多种方法
2014/09/18 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
linux面试题参考答案(8)
2016/04/19 面试题
《小小雨点》教学反思
2014/02/18 职场文书
群教班子对照检查材料
2014/08/26 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
看雷锋电影观后感
2015/06/10 职场文书
公司财务管理制度
2015/08/04 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android