函數是:1、show(),方法可顯示隱藏的元素,語法「元素物件.show()」;2、hide(),方法可隱藏顯示的元素,語法「元素物件.hide()」;3、toggle(),該方法可顯示或隱藏元素,語法「元素物件.toggle()」。
本教學操作環境:windows10系統、jquery3.2.1版本、Dell G3電腦。
1、顯示元素:show()
如果被選取元素已被隱藏,則顯示這些元素:
語法
$(selector).show(speed,callback)
speed可選。規定元素從隱藏到完全可見的速度。預設為 "0"。
可能的值:
毫秒(例如1500)
"slow"
##"normal" #"fast"在設定速度的情況下,元素從隱藏到完全可見的過程中,會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。2、隱藏元素:hide()
#如果已選取的元素已被顯示,則隱藏該元素。 語法$(selector).hide(speed,callback)
##"normal"
#"fast"
在設定速度的情況下,元素從可見到隱藏的過程中,會逐漸改變其高度、寬度、外邊距、內邊距和透明度。
範例如下:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").hide(); }); $(".btn2").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button class="btn1">Hide</button> <button class="btn2">Show</button> </body> </html>
輸出結果:
#3、自動識別,顯示或隱藏元素:toggle()toggle() 方法在被選元素上進行 hide() 和 show() 之間的切換。
此方法檢查被選元素的可見狀態。如果一個元素是隱藏的,則執行 show(),如果一個元素是可見的,則執行 hide() - 這會造成一種切換的效果。
註解:隱藏的元素不會被完全顯示(不再影響頁面的佈局)。
提示:此方法可用於自訂函數之間的切換。
語法
$(selector).toggle(speed,easing,callback)
範例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <p>这是一个段落。</p> <button>切换 hide() 和 show()</button> </body> </html>
相關視頻教學推薦:
jQuery影片教學以上是jquery顯示和隱藏元素使用的是什麼函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!