实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
更新时间：2016年05月13日 16:53:06 作者：yenga
这篇文章主要介绍了实例讲解Jquery中隐藏hide、显示show、切换toggle的用法，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery中show()、hide()和toggle()用法实例，供大家参考，具体内容如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>初识jQuery</title>
<script src="http:/www.jb51.net/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程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery UI插件自定义confirm确认框的方法,实例分析了jQuery的UI插件使用技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
jQuery bxCarousel实现图片滚动切换效果示例代码
BxCarousel可以指定显示的元素总数，可以指定每次滚动的元素个数,自动播放模式，前一张/后一张按钮控制图片流动2013-05-05
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
今天小编就为大家分享一篇关于Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解以及数组中查询某值是否存在，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了JQuery中使文本框获得焦点的方法,实例分析了jQuery针对文本框获得焦点的技巧,需要的朋友可以参考下2015-02-02
jQuery對select的操作的实际应用代码。方便大家学习jquery2009-05-05
这篇文章主要介绍了jQuery获取复选框选中的当前行的某个字段的值,需要的朋友可以参考下2017-09-09
本文主要分享了jquery实现数字输入框的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
IE8下Jquery获取select选中的值post到后台报错问题
IE8下出现的问题是直接将selectedValue post发送到后台，后台接收时会报错，这是因为IE8下selectedValue当成了数组，后台无法识别2014-07-07
本文主要分享了使用jQuery实现复选框的全选和反选的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了jQuery实现简单的回到顶部totop功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2017-10-10
最新评论