首頁 > web前端 > 前端問答 > jquery怎麼根據id來隱藏div

jquery怎麼根據id來隱藏div

WBOY
發布: 2022-06-01 18:59:40
原創
3492 人瀏覽過

方法:1、利用「#id」選擇器取得指定id的元素對象,語法為「$("#指定的id值")」;2、利用hide()方法或toggle()方法將指定id的元素物件隱藏即可,語法為「元素物件.hide()」或「元素物件.toggle()」。

jquery怎麼根據id來隱藏div

本教學操作環境:windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery怎麼根據id來隱藏div

1、利用id選擇器取得元素

#id ​​選擇器選取帶有指定id 的元素。

id ​​引用 HTML 元素的 id 屬性。

注意:id 屬性在文件內必須是唯一的。

注意:不要使用數字開頭的 id 屬性!在某些瀏覽器中可能出問題。

語法

$("#id")
登入後複製

2、隱藏元素

#hide() 方法隱藏被選取元素。

提示:這與 CSS 屬性 display:none 類似。

語法

$(selector).hide(speed,easing,callback)
登入後複製

toggle() 方法隱藏元素

被選元素上進行 hide() 和 show() 之間的切換。

此方法檢查被選元素的可見狀態。如果一個元素是隱藏的,則執行 show(),如果一個元素是可見的,則執行 hide() - 這會造成一種切換的效果。

註解:隱藏的元素不會被完全顯示(不再影響頁面的佈局)。

提示:此方法可用於自訂函數之間的切換。

語法

$(selector).toggle(speed,easing,callback)
登入後複製

範例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>132</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("#p1").hide();
});
$(".btn2").click(function(){
$("#p1").show();
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>
登入後複製

#輸出結果:

jquery怎麼根據id來隱藏div

相關影片教學推薦: jQuery影片教學

以上是jquery怎麼根據id來隱藏div的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板