语法:
$(selector).hide(speed,callback); $(selector).show(speed,callback);
eg1:
<!DOCTYPE html> <html> <head> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>田XX，我爱你。</p> <p>傻X，田XX。</p> <p>滚X,田XX。</p> </body> <html>
运行结果：
eg2:
<!DOCTYPE html> <html> <head> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <style type="text/css"> div.ex{ background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } </style> </head> <body> <h3>我爱你</h3> <div> <button type="button">隐藏</button> <p>姓名：田XX <br /> 田大大<br /> 田傻逼</p> </div> </body> <html>
运行结果：
jQuery toggle()
使用toggle()方法来切换hide()和show()方法。
<!DOCTYPE html> <html> <head> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <button type="button">切换</button> <p>这是个段落</p> </body> <html>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。
更多关于jQuery相关内容还可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》