jqueryのIDに基づいてdivを非表示にする方法-フロントエンドQ&A-php.cn

jqueryのIDに基づいてdivを非表示にする方法

WBOY

リリース： 2022-06-01 18:59:40

オリジナル

3501 人が閲覧しました

方法: 1. "#id" セレクターを使用して、指定された ID を持つ要素オブジェクトを取得します。構文は "$("#specified id value")" です。 2. hide() メソッドを使用します。または toggle() このメソッドは、指定された ID を持つ要素オブジェクトを非表示にします (構文は "element object.hide()" または "element object.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を非表示にする方法