【HTML CSS#10】jQuery学習メモ

2025年6月1日2025年9月26日

ブログ

こんにちは！Ryuseiです。

今回は、JavaScriptの学習を進める中で「jQuery」について学んだことをまとめます！

jQueryは、Webブラウザ用のJavaScriptをより簡単に書けるようにする軽量なライブラリです。特に、複雑なDOM操作やイベント処理がシンプルに記述できるので、学習を始めたばかりの自分にはとても便利なツールだと感じました。

jQueryの基本ポイント

jQueryファイルはJavaScriptファイルより先に読み込む必要がある
CDNを使えば環境構築なしで手軽に利用できる

具体例で理解する

Vanilla JavaScriptの場合(ライブラリを使用しない場合)

var target = document.getElementsByClassName("hoge");
for (var i = 0, l = target.length; i < l; i++) {
    target[i].style.color = "red";
}

これをjQueryで書くと…

var target = $(".hoge").css("color", "red");

たったこれだけで、同じことができます！シンプルで見やすい！

jQueryの基本構文

$(document).ready(function() {
    // 処理内容
});

または、さらに省略して書ける！

$(function() {
    // 処理内容
});

これらをjsファイルに記述してその中にjQueryを実装していきます。

Error:

実際に書いたコード例

要素取得と操作のチェーン

$(function() {
    var target = $('#target');
    target.css('color', 'red').text('色を変えました');
});

オブジェクト形式でスタイルを指定

$(function() {
    var target = $('#target');
    var style = {
        'color': 'red',
        'background-color': 'blue',
    };
    target.css(style).text('色を変えました');
});

動的に要素を指定

$(function() {
    var text = 'target';
    var target = $('#' + text);
});

イベント処理も簡単！

例えばクリックイベント：

$(function() {
    const text = 'target';
    const target = $('#' + text);

    target.on('click', function() {
        const that = $(this);
        that.css('color', 'red');
    });
});