[jQuery] 效果:隱藏與顯示
hide()與show()
hide()與show()方法能夠隱藏與顯示HTML元素:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnHIDE").click(function () {
$("p").hide();
});
$("#btnSHOW").click(function () {
$("p").show();
});
});
</script>
</head>
<body>
<p>按下按鈕隱藏/顯示</p>
<button id="btnHIDE">隱藏</button>
<button id="btnSHOW">顯示</button>
</body>
</html>
$(document).ready(function () { } ); HTML載入完畢後才執行function，避免找不到HTML元素。
$("#btnHIDE").click(function () { } 指派id="btnHIDE"的標籤加上click事件與執行function。
$("p").hide(); 將<p>標籤執行hide()方法，隱藏<p>標籤。
$("#btnSHOW").click(function () { } 指派id="btnSHOW"的標籤加上click事件與執行function。
$("p").show(); 將<p>標籤執行show()方法，顯示<p>標籤。
按下顯示按鈕，顯示<p>標籤:
按下隱藏按鈕，隱藏<p>標籤:
語法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed參數用來指定隱藏或顯示的速度。
callback參數是一個function，執行於hide()或show()方法執行完畢後，避免執行其他效果時發生錯誤。
hide()方法與速度:
$(document).ready(function () {
$("#btnHIDE").click(function () {
$("p").hide(1000);
});
$("#btnSHOW").click(function () {
$("p").show(1000);
});
});
jQuery toggle()
toggle()方法可以用來切換hide()與show()方法，當隱藏時顯示，顯示時則隱藏。
toggle()方法:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnTOGGLE").click(function () {
$("p").toggle();
});
});
</script>
</head>
<body>
<p>按下按鈕隱藏/顯示</p>
<button id="btnTOGGLE">隱藏/顯示</button>
</body>
</html>
$(document).ready(function () { } ); HTML載入完畢後才執行function，避免找不到HTML元素。
$("#btnTOGGLE").click(function () { } 指派id="btnTOGGLE"的標籤加上click事件與執行function。
$("p").toggle(); 將<p>標籤執行toggle()方法，切換<p>標籤隱藏與顯示。
按下顯示按鈕，切換<p>標籤的隱藏與顯示:
語法:
$(selector).toggle(speed,callback);
speed參數用來指定隱藏或顯示的速度。
callback參數是一個function，執行於toggle()方法執行完畢後，避免執行其他效果時發生錯誤。
toggle()方法與速度:
$(document).ready(function () {
$("#btnTOGGLE").click(function () {
$("p").toggle(1000);
});
});