jQuery實現基本隱藏與顯示效果的方法詳解

2019-11-19 13:01:36

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現基本隱藏與顯示效果的方法。分享給大家供大家參考，具體如下：

jQuery 隱藏/顯示

語法:

$(selector).hide(speed,callback);$(selector).show(speed,callback);

eg1:

<!DOCTYPE html><html><head><script src="http://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="http://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 class="ex"><button class="hide" type="button">隱藏</button><p>姓名：田XX <br />田大大<br />田傻逼</p></div></body><html>

運行結果：

jQuery toggle()

使用toggle()方法來切換hide()和show()方法。

<!DOCTYPE html><html><head><script src="http://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>

運行結果：