jQuery 实例 - 180+ 个 jQuery 示例，带运行效果和代码

このページでは、豊富な jQuery の実例集を紹介しています。さまざまな一般的な機能を網羅しており、各実例には実行可能なデモと完全なコードが用意されています。jQuery を素早く習得し、実際のプロジェクトに適用するのに役立ちます。

1. jQuery セレクタの实例

ID セレクタ、クラス セレクタ、要素セレクタ、属性セレクタなど、さまざまなセレクタの使い方の例を紹介します。

$('#example')

$('.highlight')

2. jQuery イベントの实例

jQuery を使用してクリックイベント、マウスホバーイベント、フォーム送信イベントなどをバインドおよび処理する方法を紹介します。

クリック イベントの例

以下は、ボタンをクリックするとアラートが表示される例です:

<button id="clickButton">クリックして下さい</button>
 <script> 
$('#clickButton').on('click', function() { alert('ボタンがクリックされました!'); }); 
</script>

マウスホバー イベントの例

以下は、マウスが要素にホバーしたときに背景色が変わる例です:

<div id="hoverDiv" style="width:100px; height:100px; background-color:lightblue;">
 ホバーして下さい 
</div>
 <script>
 $('#hoverDiv').hover(function() { $(this).css('background-color', 'yellow'); }, function() { $(this).css('background-color', 'lightblue'); }); 
</script>

3. jQuery エフェクトの实例

フェードイン、フェードアウト、スライド、非表示、表示など、さまざまなアニメーションエフェクトを作成する方法と、jQuery を使用してアニメーションエフェクトをカスタマイズする方法を紹介します。

フェードインとフェードアウトの例

以下は、要素をフェードインおよびフェードアウトさせる例です:

<button id="fadeButton">フェード イン/アウト</button>
 <div id="fadeDiv" style="width:100px; height:100px; background-color:lightgreen; display:none;">
</div>
 <script> 
$('#fadeButton').on('click', function() { $('#fadeDiv').fadeToggle(); }); 
</script>

スライドの例

以下は、要素をスライドさせる例です:

<button id="slideButton">スライド イン/アウト</button>
 <div id="slideDiv" style="width:100px; height:100px; background-color:lightcoral; display:none;">
</div>
 <script>
 $('#slideButton').on('click', function() { $('#slideDiv').slideToggle(); });
 </script>

4. jQuery HTML/CSS 操作の实例

jQuery を使用して HTML 要素のコンテンツ、属性、スタイルを取得および設定する方法と、HTML 要素を追加、削除、および操作する方法を紹介します。

HTML コンテンツの操作

以下は、ボタンをクリックして HTML コンテンツを変更する例です:

<button id="contentButton">内容を変更</button>
 <p id="contentPara">元の内容</p>
 <script>
 $('#contentButton').on('click', function() { $('#contentPara').html('新しい内容'); });
 </script>

CSS スタイルの操作

以下は、ボタンをクリックして要素の背景色を変更する例です:

<button id="styleButton">スタイルを変更</button>
 <div id="styleDiv" style="width:100px; height:100px; background-color:lightblue;"></div>
 <script> $('#styleButton').on('click', function() { $('#styleDiv').css('background-color', 'orange'); });
 </script>

5. jQuery トラバーサルの实例

jQuery を使用して DOM ツリーをトラバースし、親要素、子要素、兄弟要素を検索および操作する方法の例を紹介します。

親要素の検索

以下は、特定の要素の親要素を取得する例です:

<div id="parentDiv">
 <div id="childDiv">子要素</div>
 </div>
 <script>
 var parent = $('#childDiv').parent(); parent.css('border', '2px solid red');
 </script>

6. jQuery AJAX の实例

jQuery の AJAX メソッドを使用してデータの読み込み、サーバーへのデータの送信、サーバーの応答の処理を行う方法の例を紹介します。

データの読み込み

以下は、AJAX を使用して外部ファイルからデータを読み込む例です:

<button id="loadButton">データを読み込む</button>
 <div id="dataDiv"></div>
 <script>
 $('#loadButton').on('click', function() { $('#dataDiv').load('data.txt'); });
 </script>

7. jQuery プラグインの实例

フォーム検証プラグイン、日付選択プラグインなど、一般的に使用される jQuery プラグインの例を紹介します。

日付選択プラグインの例

以下は、jQuery UI を使用して日付選択プラグインを実装する例です:

<input type="text" id="datepicker"> <script> $(function() { $('#datepicker').datepicker(); }); </script>

関連リソース

• jQuery 公式ドキュメント

Q&A

1. 質問: jQuery とは？
   回答: jQuery は、JavaScript ライブラリであり、HTML ドキュメントのトラバースと操作、アニメーション、イベント処理、AJAX を簡素化します。
2. 質問: jQuery を使うメリットは？
   回答: jQuery を使用すると、コードを記述する量が減り、クロスブラウザの互換性が向上し、開発プロセスが簡素化されます。
3. 質問: jQuery を学ぶには？
   回答: jQuery を学ぶには、公式ドキュメント、チュートリアル、オンラインコースなど、さまざまなリソースを利用できます。