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

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

本教學操作環境：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>

輸出結果：

+2.gif

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>

輸出結果：

+3.gif

相關視訊教學推薦：

以上就是jquery顯示和隱藏元素使用的是什麼函數的詳細內容，更多請關注TW511.COM其它相關文章！