溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下jquery怎么弄元素不可見，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
jquery元素不可見的實現方法：1、使用hide方法隱藏被選元素，語法如“$("p").hide();”；2、使用toggle方法元素隱藏，語法如“$("p").toggle();”。
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怎么弄元素不可見有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
