ホームページ >ウェブフロントエンド >jsチュートリアル >非表示のjquery要素を実装する方法
非表示のjquery要素を実装する方法
- 藏色散人オリジナル
- 2020-12-08 10:01:582858ブラウズ
非表示の jquery 要素を実装する方法: 1. "$("p").hide();"; などの構文を使用して、選択した要素を非表示にするには、hide メソッドを使用します。 2. toggle メソッドを使用して、 「$("p").toggle();」などの構文を使用して要素を非表示にします。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.0 バージョン、Dell G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。
jquery で要素を非表示にする (非表示)
jquery を使用して要素の非表示を制御する, これは 1 つの文で行うことができます (例:
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');//显示or
$("#id")[0].style.display='none';display=none オブジェクトの非表示を制御する
display=blockオブジェクトの表示を制御する
方法 4: css('visibility','hidden')を使用する
例:
$("#id").css('visibility','hidden');//元素隐藏
$("#id").css('visibility','visible');//元素显示CSS の可視性プロパティは、要素が表示されるかどうかを指定します。
visible 要素は表示されます。
hidden 要素は非表示になります。
collapse テーブル要素で使用すると、この値は行または列を削除しますが、テーブルのレイアウトには影響しません。行または列が占めていたスペースは、他のコンテンツのために解放されます。この値が別の要素で使用される場合、その値は「非表示」として表示されます。
inherit 親要素から可視性属性の値を継承します。
注:
display:none とvisible:hidden はどちらも Web ページ上の要素を非表示にできます。視覚効果に違いはありませんが、一部の DOM 操作ではこの 2 つに違いがあります。 :
display:none ---非表示オブジェクト用の物理スペースを予約しません。つまり、オブジェクトがページから完全に消えます。平たく言えば、見ることも触れることもできません。
visible:hidden--- オブジェクトは Web ページ上で非表示になりますが、Web ページ上でオブジェクトが占めるスペースは変更されていません。つまり、高さ、幅などの属性はそのままです。 . 平たく言えば、目に見えないが触れることができるということです。
以上が非表示のjquery要素を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。