Jquery中的隱藏和顯示方法有如下三個:
- hide()/隱藏屬性
- show()/顯示屬性
- toggle()/在顯示和隱藏之間進行切換
上面三個方法在實際應用中,主要分爲兩大類,有參和無參:
無參場景下的運用
- hide()/隱藏屬性
- show()/顯示屬性
- toggle()/在顯示和隱藏之間進行切換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").hide();
});
$("#btn2").click(function(){
$("#p1").show();
});
$("#btn3").click(function(){
$("#p3").toggle();
});
});
</script>
</head>
<body>
<p id="p1">使用hide()方法隱藏文本<p>
<button id="btn1">隱藏</button>
<button id="btn2">顯示</button>
<p id="p3">這是一個文本段落。</p>
<button id="btn3">隱藏/顯示toggle()</button>
</body>
</html>
二有參數場景運用
另外一種的有參運用場景,其實就是加入了speed和callback,速率和回調函數:
- hide(speed,callback)/隱藏屬性
- show(speed,callback)/顯示屬性
- toggle(speed,callback)/在顯示和隱藏之間進行切換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
//1000是以毫秒爲單位,linear是顯示/隱藏的樣式,function即回調函數
$("#p1").hide(1000,"linear",function(){
alert("hide方法執行完畢");});
});
$("#btn2").click(function(){
$("#p1").show(1000,"lineat",function(){
alert("show()方法執行完畢");
});
});
$("#btn3").click(function(){
$("#p3").toggle(1000,"swing",function(){
alert("toggle方法執行完畢");});
});
});
</script>
</head>
<body>
<p id="p1">使用hide()方法隱藏文本<p>
<button id="btn1">隱藏</button>
<button id="btn2">顯示</button>
<p id="p3">這是一個文本段落。</p>
<button id="btn3">隱藏/顯示toggle()</button>
</body>
</html>