jQuery | 効率的なDOM操作とイベント処理 | 複数の実例で理解するJavaScriptライブラリ解説

INDEX

jQueryについての解説

jQueryについての解説

jQueryは、JavaScriptのライブラリで、HTMLのドキュメント操作、イベント処理、アニメーションなどを簡潔に行うことができます。jQueryは、軽量でクロスブラウザ対応しているため、特に複雑なDOM操作やAjaxリクエストの管理に便利です。

このライブラリだけで書籍が発売されているほどの内容は多岐にわたります。参考程度とお考え下さい。

jQueryの実装方法

jQueryを使用するためには、以下のコードを<head>内に記述して、ライブラリを読み込みます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

jQueryの特徴

特徴	説明
DOM操作の簡略化	複雑なDOM操作が簡単に行えます。
イベント処理	クリックやホバーなどのイベント処理が簡単に実装できます。
アニメーションのサポート	フェードインやスライドダウンなどのアニメーションが容易に実装可能です。
Ajaxリクエストの簡略化	非同期のHTTPリクエストをシンプルに行えます。

プロパティとその値の一覧表

プロパティ名	説明	値の例
$(selector).text()	要素のテキスト内容を取得または設定します。	$(‘#id’).text(‘新しいテキスト’)
$(selector).addClass()	指定されたクラスを要素に追加します。	$(‘#id’).addClass(‘class-name’)
$(selector).fadeIn()	要素をフェードインさせます。	$(‘#id’).fadeIn(1000)
$(selector).click()	クリックイベントを登録します。	$(‘#id’).click(function() {…})

テキストを操作する例

実行例

HTMLとJavaScriptコード


// テキストを操作するjQueryの例
<div id="manipulate-text">変更前のテキスト</div>

<script>
$('#manipulate-text').text('テキストが変更されました！');
// 結果: テキストが「テキストが変更されました！」に変更されます。
</script>

解説

この例では、`$(‘#manipulate-text’).text()`メソッドを使用して、指定した要素のテキストを変更しています。

クラスを追加する例

実行例

この要素にクラスを追加します

HTMLとJavaScriptコード


// クラスを追加するjQueryの例
<div id="add-class">この要素にクラスを追加します</div>

<script>
$('#add-class').addClass('highlight');
// 結果: 要素に「highlight」クラスが追加され、スタイルが変わります。
</script>

解説

この例では、`$(‘#add-class’).addClass()`メソッドを使用して、指定された要素にクラスを追加しています。

フェードインアニメーションを適用する例

実行例

この要素がフェードインします

HTMLとJavaScriptコード


// フェードインアニメーションを適用するjQueryの例
<div id="fade-in-demo">この要素がフェードインします</div>

<script>
$('#fade-in-demo').hide().fadeIn(2000);
// 結果: 要素が2秒かけてフェードインします。
</script>

解説

この例では、`$(‘#fade-in-demo’).fadeIn()`メソッドを使用して、要素をフェードインさせています。最初に`hide()`で非表示にし、その後フェードインで表示させています。

クリックイベントを処理する例

実行例

HTMLとJavaScriptコード


// クリックイベントを処理するjQueryの例
<button id="click-button">クリックしてください</button>
<div id="click-response"></div>

<script>
$('#click-button').click(function() {
    $('#click-response').text('ボタンがクリックされました！');
});
// 結果: ボタンがクリックされると、「ボタンがクリックされました！」というテキストが表示されます。
</script>