jquery顯示和隱藏元素使用的是什麼函數

WBOY
發布: 2022-04-15 11:26:05
原創
2653 人瀏覽過

函數是:1、show(),方法可顯示隱藏的元素,語法「元素物件.show()」;2、hide(),方法可隱藏顯示的元素,語法「元素物件.hide()」;3、toggle(),該方法可顯示或隱藏元素,語法「元素物件.toggle()」。

jquery顯示和隱藏元素使用的是什麼函數

本教學操作環境:windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery顯示和隱藏元素使用的是什麼函數

1、顯示元素:show()

如果被選取元素已被隱藏,則顯示這些元素:

語法

$(selector).show(speed,callback)
登入後複製
  • speed可選。規定元素從隱藏到完全可見的速度。預設為 "0"。

可能的值:

毫秒(例如1500)

"slow"

##"normal"

#"fast"

在設定速度的情況下,元素從隱藏到完全可見的過程中,會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。

  • callback可選。 show 函數執行完後,要執行的函數。除非設定了 speed 參數,否則不能設定該參數。

2、隱藏元素:hide()

#如果已選取的元素已被顯示,則隱藏該元素。

語法

$(selector).hide(speed,callback)
登入後複製

  • speed可選。規定元素從可見到隱藏的速度。預設為 "0"。

可能的值:

毫秒(例如1500)

"slow"

##"normal"

#"fast"

在設定速度的情況下,元素從可見到隱藏的過程中,會逐漸改變其高度、寬度、外邊距、內邊距和透明度。

    callback可選。 hide 函數執行完後,要執行的函數。
  • 除非設定了 speed 參數,否則不能設定該參數。

範例如下:

<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>
登入後複製

輸出結果:

jquery顯示和隱藏元素使用的是什麼函數

#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影片教學

以上是jquery顯示和隱藏元素使用的是什麼函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!