实例讲解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程序设计有所帮助。