实例讲解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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 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中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php防止用户重复提交表单
2015/11/02 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python splitlines使用技巧
2008/09/06 Python
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python 读取.nii格式图像实例
2020/07/01 Python
用python发送微信消息
2020/12/21 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
考核工作实施方案
2014/03/30 职场文书
十佳护士先进事迹
2014/05/08 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL