Jquery中的隱藏和顯示屬性簡易詳解

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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章