jquery元素不可見的實作方法：1、使用hide方法隱藏被選元素，語法如「$("p").hide();」；2、使用toggle方法元素隱藏，語法如“$("p").toggle();”。
本教學操作環境：windows7系統、jquery1.10.0版本，Dell G3電腦，此方法適用於所有品牌電腦。
推薦：jquery影片教學
jquery讓元素不可見（隱藏）
使用jquery控制元素的隱藏，一句話就能搞定，例如：
1、使用hide()
hide() 方法隱藏被選取元素。
提示：這與 CSS 屬性 display:none 類似。
註解：隱藏的元素不會被完全顯示（不再影響頁面的佈局）。
如需顯示隱藏的元素，就使用 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(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>方法2：使用toggle()
toggle() 方法在被選元素上進行 hide() 和 show() 之間的切換。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，則切換為可見的。
此方法檢查被選元素的可見狀態。如果一個元素是隱藏的，則執行 show()，如果一個元素是可見的，則執行 hide() - 這會造成一種切換的效果。
註解：隱藏的元素不會被完全顯示（不再影響頁面的佈局）。
提示：此方法可用於自訂函數之間的切換。
範例：
<!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>
<p>这是一个段落。</p>
<button>切换 hide() 和 show()</button>
</body>
</html>方法3：使用css('display','none')
範例：
$("#id").css('display','none');//隐藏
$("#id").css('display','block');//显示或
$("#id")[0].style.display='none';display=none 控制物件的隱藏
display=block控制物件的顯示
方法4：使用css('visibility','hidden')
#範例：
$("#id").css('visibility','hidden');//元素隐藏
$("#id").css('visibility','visible');//元素显示CSS visibility 屬性規定元素是否可見。
visible 元素可見。
hidden 元素不可見。
collapse 在表格元素中使用時，此值可刪除一行或一列，但它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，則會呈現為 "hidden"。
inherit 從父元素繼承 visibility 屬性的值。
注意：
display:none和visible:hidden都能把網頁上某個元素隱藏起來，在視覺效果上沒有區別，但是在一些DOM操作中兩者有區別:
display:none ---不為被隱藏的物件保留其物理空間，也就是該物件在頁面上完全消失，通俗來說就是看不見也摸不到。
visible:hidden--- 使物件在網頁上不可見，但該物件在網頁上所佔的空間並沒有改變，即它仍然具有高度、寬度等屬性，通俗來說就是看不見但摸得到。
以上是jquery元素不可見的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
