实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
时间：2022-03-08 10:17:46|栏目：jquery|点击： 次
本文实例为大家分享了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实现合并/追加数组并去除重复项的方法 原创
栏 目：jquery
下一篇：jquery动态增加text元素以及删除文本内容实例代码
本文标题：实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
本文地址：http://www.codeinn.net/misctech/195581.html
