這篇文章主要介紹了jQuery中hide()方法用法,以實例形式較為詳細的分析了hide()方法的定義、功能與使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中hide()方法用法。分享給大家供大家參考。具體分析如下:
此方法可以將符合元素隱藏。
hide()方法的用法:
此方法如果沒有對隱藏效果加以時間限定,那麼匹配元素會被瞬間隱藏。例如:
程式碼如下:
$("p").hide()
以上程式碼可以將所有p元素瞬間隱藏。
如果方法對隱藏效果加以時間限定,那麼匹配元素將會在限定的事件內以比較優雅的形式隱藏。例如:
程式碼如下:
$("p").hide(2000)
以上程式碼可以將所有p元素在2000毫秒(2秒)內隱藏。
此方法也可以在隱藏完成後觸發一個回呼函數。例如:
程式碼如下:
$("p").hide(2000,function(){alert("我隱藏好了")});
實例程式碼:
程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>hide()函数-脚本之家</title> <style type="text/css"> p{ color:blue; background-color :green; width:100px; height:100px; margin-top :10px; } </style> <script type="text/ javascript " src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $( document ).ready(function(){ $("#first").click(function(){ $(".first").hide(); }) $("#second").click(function(){ $(".second").hide(2000,function(){alert("我隐藏好了")}); }) }) </script> </head> <body> <p class="first"></p> <p class="second"></p> <button id="first">瞬间隐藏</button> <button id="second">优雅的隐藏</button> </body> </html>
以上程式碼能夠在隱藏完成以後觸發回呼函數,於是彈出一個提示框。
以上是有關jQuery中hide()方法用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!