jQuery效果
元素隐藏與顯示的不同方式（如有發現不全的請提出寶貴建議）
使用幾個方式時需引用jquery.min.js。如果不引否則代碼無效
下載下傳位址：https://code.jquery.com/jquery-3.3.1.min.js
1》使用hide隐藏，show顯示，
<!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(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你點選“隐藏” 按鈕，我将會消失。</p>
<button id="hide">隐藏</button>
<button id="show">顯示</button>
</body>
</html>
2》使用display：none隐藏和display:block顯示
<!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(){
$("#hide").click(function(){
$("p").css("display","none")
});
$("#show").click(function(){
$("p").css("display","block")
});
});
</script>
</head>
<body>
<p>如果你點選“隐藏” 按鈕，我将會消失。</p>
<button id="hide">隐藏</button>
<button id="show">顯示</button>
</body>
</html>
或者：
<!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(){
$("#hide").click(function(){
$("p")[0].style.display='none'
});
$("#show").click(function(){
$("p")[0].style.display='block'
});
});
</script>
</head>
<body>
<p>如果你點選“隐藏” 按鈕，我将會消失。</p>
<button id="hide">隐藏</button>
<button id="show">顯示</button>
</body>
</html>
3》使用在css中定義方法，然後JS調用
//CSS:
<style>
.hide{
display:none；
}
.show{
display：block；
}
</style>
<!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(){
$("#hide").click(function(){
$("p").addClass("hide")
});
$("#show").click(function(){
$("p").addClass("show")
});
});
</script>
</head>
<body>
<p>如果你點選“隐藏” 按鈕，我将會消失。</p>
<button id="hide">隐藏</button>
<button id="show">顯示</button>
</body>
</html>
4》使用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(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>隐藏/顯示</button>
<p>這是一個文本段落。</p>
<p>這是另外一個文本段落。</p>
</body>
</html>
5.使用’visibility’,‘hidden’隐藏和’visibility’,'visible’顯示
visible 元素可見。
hidden 元素不可見。
這種方式按鈕會留在原地不動，不會因為元素消失而浮動。
<!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(){
$("#hide").click(function(){
$("p").css('visibility','hidden');
});
$("#show").click(function(){
$("p").css('visibility','visible');
});
});
</script>
</head>
<body>
<p>如果你點選“隐藏” 按鈕，我将會消失。</p>
<button id="hide">隐藏</button>
<button id="show">顯示</button>
</body>
</html>
注意：
display:none和visible:hidden都能把網頁上某個元素隐藏起來，在視覺效果上沒有差別，但是在一些DOM操作中兩者有差別:
display:none —不為被隐藏的對象保留其實體空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
visible:hidden— 使對象在網頁上不可見，但該對象在網頁上所占的空間沒有改變，即它仍然具有高度、寬度等屬性，通俗來說就是看不見但摸得到。
![block相關知識點[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)