検索

jQuery は、Web サイトの対話性を強化するために使用できる非常に人気のある JavaScript ライブラリです。一般的な効果の 1 つは要素の表示と非表示ですが、これを実現するための jQuery の使用方法を詳しく紹介します。

まず、HTML では、非表示または表示する要素が必要です。これには、div、span、p などの任意のタグを使用できます。たとえば、次のコードは 2 つのボタンと 1 つの div 要素を作成します。

<button id="show">显示</button>
<button id="hide">隐藏</button>

<div id="target">
  <p>这是要隐藏或显示的内容</p>
</div>

id ​​属性は要素を識別するために使用され、後続の JavaScript コードで使用されます。

次に、JavaScript で、jQuery ライブラリを使用して要素を選択し、それらのイベント ハンドラーを追加する必要があります。この例では、ボタンをクリックしたときに div 要素を表示または非表示にする必要があります。この効果を実現するコードは次のとおりです。

$(document).ready(function() {
  $("#show").click(function() {
    $("#target").show();
  });
  $("#hide").click(function() {
    $("#target").hide();
  });
});

上記のコードは 2 つの部分に分かれています。まず、$(document).ready 関数で、2 つのクリック イベント ハンドラーが定義されています。 $("#show")ID が「show」のボタン要素が選択されています。$("#hide")ID が「hide」のボタン要素が選択されています。これらのセレクターは、イベント ハンドラーを追加するためにメソッドを呼び出すことができる jQuery オブジェクトを返します。

2 番目に、ボタンをクリックすると、対応するハンドラーがトリガーされます。 $("#target")ID が「target」の div 要素が選択され、その show() メソッドまたは Hide() メソッドが呼び出されて、要素が表示または非表示になります。

ここでは $ 記号が使用されていることに注意してください。これは、jQuery ライブラリがグローバル スコープで $ 記号を定義しているためです。 jQuery の代わりにこの表記法を使用すると、コードを短縮できます。たとえば、$("#target")jQuery("#target") と同等です。

さらに、show() メソッドと Hide() メソッドは、表示または非表示のメソッドを制御するためのいくつかのオプションのパラメータを受け入れます。たとえば、$("#target").show("slow") を使用すると、表示に遅いアニメーション効果を与えることができます。同様に、$("#target").hide(1000) を使用して、非表示アニメーションを 1 秒間継続させることができます。

show() メソッドと Hide() メソッドに加えて、jQuery には要素の可視性を制御する他のメソッドも提供されます。たとえば、 fadeIn() メソッドと fadeOut() メソッドは、要素をフェードインおよびフェードアウトさせます。 slideDown() メソッドと slideUp() メソッドを使用すると、要素が下にスライドして折りたたまれます。これらのメソッドを使用する場合、show() メソッドおよび Hide() メソッドと同じパラメータを使用してアニメーション効果を制御できます。

最後に、要素の表示状態を切り替えたい場合は、toggleClass() メソッドを使用できます。たとえば、次のコードは、クリックすると div 要素を表示または非表示にするトグル ボタンを作成します。

<button id="toggle">切换</button>

<div id="target">
  <p>这是要隐藏或显示的内容</p>
</div>

JavaScript コードは次のとおりです。

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#target").toggleClass("hidden");
  });
});

隠し CSS クラスが使用されます。ここでは要素の表示と非表示を制御します。 div 要素にこのクラスがある場合、非表示になります。該当するクラスがない場合は表示されます。 toggleClas メソッドは、要素の 2 つの状態を切り替えます。

以上がjqueryの非表示効果の表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Reactの強力なコミュニティとエコシステムの利点Reactの強力なコミュニティとエコシステムの利点Apr 29, 2025 am 12:46 AM

反応の反応は、反応すること:1)即時カクセスソリューションスループラットフループラットフルフルフローアンドGithub;

モバイル開発のためのネイティブの反応:クロスプラットフォームアプリの構築モバイル開発のためのネイティブの反応:クロスプラットフォームアプリの構築Apr 29, 2025 am 12:43 AM

ReactNativeIsCosenformedeveledementBecauseDevelowSowRiteCodeOdeCodeOdeCodeandedDeployitOnMultPlatforms、ReducingDevelopmentTimeandCosts.ItOfferSnear-NativePerformance、Athrive-community、AndleverageSexistingwebdevelyments.keytomatherinere

ReactのuseState()で状態を正しく更新しますReactのuseState()で状態を正しく更新しますApr 29, 2025 am 12:42 AM

ReactのuseState()状態の正しい更新には、州の管理の詳細を理解する必要があります。 1)機能的な更新を使用して、非同期更新を処理します。 2)状態を直接変更しないように、新しい状態オブジェクトまたは配列を作成します。 3)単一の状態オブジェクトを使用して、複雑なフォームを管理します。 4)アンチシェイクテクノロジーを使用して、パフォーマンスを最適化します。これらの方法は、開発者が一般的な問題を回避し、より堅牢なReactアプリケーションを作成するのに役立ちます。

Reactのコンポーネントベースのアーキテクチャ:スケーラブルなUI開発の鍵Reactのコンポーネントベースのアーキテクチャ:スケーラブルなUI開発の鍵Apr 29, 2025 am 12:33 AM

Reactのコンポーネントアーキテクチャにより、モジュール性、再利用性、保守性を通じて、スケーラブルなUI開発を効率的にします。 1)モジュール性により、UIを独立して開発およびテストできるコンポーネントに分解できます。 2)コンポーネントの再利用性は時間を節約し、さまざまなプロジェクトの一貫性を維持します。 3)メンテナビリティにより問題のあるポジショニングと更新が容易になりますが、コンポーネントを過剰な普及と深いネスティングを回避する必要があります。

Reactによる宣言プログラミング:UIロジックの簡素化Reactによる宣言プログラミング:UIロジックの簡素化Apr 29, 2025 am 12:06 AM

Reactでは、宣言的なプログラミングは、UIの望ましい状態を記述することにより、UIロジックを簡素化します。 1)UIステータスを定義することにより、ReactはDOMの更新を自動的に処理します。 2)この方法により、コードのメンテナンスがより明確かつ容易になります。 3)しかし、国家管理の複雑さと最適化された再レンダリングに注意を払う必要があります。

Reactのエコシステムのサイズ:複雑な風景をナビゲートしますReactのエコシステムのサイズ:複雑な風景をナビゲートしますApr 28, 2025 am 12:21 AM

tonavigatereAct'somplexEcosystemively、理解を理解し、認識していることを認識していることを認識しているandweakness、およびIntegreatemtoemtoemtoemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemotereconceptate、その後、勾配内で測定する

どのようにReactがキーを使用してリスト項目を効率的に識別しますどのようにReactがキーを使用してリスト項目を効率的に識別しますApr 28, 2025 am 12:20 AM

RactuseSeSeSeSeSeSeSeSpiffictifideidifiedItemsbyprovidingastableidentitytoeeedelement.1)keysallowReactTotTotTotTotTotTotTotTotTotTotTotTotTotTotTotRACKESOUTRE-RENDERINGTHEENTERELIST.2)chookiniqueandstablekeys、avolididingArrayIndi​​ces.3)reforceAsificlySificlySiflovedobrovesiondanc

Reactにおける重要な問題のデバッグ:問題の特定と解決Reactにおける重要な問題のデバッグ:問題の特定と解決Apr 28, 2025 am 12:17 AM

KeysinReactarecrucialforoptimizingTherenderingProcessandDynamicListseffective.tospotandfixkey-relatedissues:1)adduniquekeystolistiTemstoavoidsissusisus、2)useuniqueidideididifiersfromdateadceSofofordiceys、3)

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境