首頁 > 文章 > web前端 > jquery元素不可見的實作方法

jquery元素不可見的實作方法

藏色散人原創: 2020-12-08 10:01:582794瀏覽

jquery元素不可見的實作方法：1、使用hide方法隱藏被選元素，語法如「$("p").hide();」；2、使用toggle方法元素隱藏，語法如“$("p").toggle();”。

jquery元素不可見的實作方法

本教學操作環境：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(&#39;display&#39;,&#39;none&#39;);//隐藏
$("#id").css(&#39;display&#39;,&#39;block&#39;);//显示

或

 $("#id")[0].style.display=&#39;none&#39;;

display=none 控制物件的隱藏

display=block控制物件的顯示

方法4：使用css('visibility','hidden')

#範例：

$("#id").css(&#39;visibility&#39;,&#39;hidden&#39;);//元素隐藏
$("#id").css(&#39;visibility&#39;,&#39;visible&#39;);//元素显示

CSS visibility 屬性規定元素是否可見。

visible　元素可見。

hidden　元素不可見。

collapse　在表格元素中使用時，此值可刪除一行或一列，但它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，則會呈現為 "hidden"。

inherit　從父元素繼承 visibility 屬性的值。

注意：

display:none和visible:hidden都能把網頁上某個元素隱藏起來，在視覺效果上沒有區別，但是在一些DOM操作中兩者有區別:

display:none ---不為被隱藏的物件保留其物理空間，也就是該物件在頁面上完全消失，通俗來說就是看不見也摸不到。

visible:hidden--- 使物件在網頁上不可見，但該物件在網頁上所佔的空間並沒有改變，即它仍然具有高度、寬度等屬性，通俗來說就是看不見但摸得到。

以上是jquery元素不可見的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：淺談Node.js監視檔案變化的方法下一篇：淺談Node.js監視檔案變化的方法

看更多