jQuery初心者はまずこの動きを覚えよう

フォームの自動入力・クリア

# HTML
<div class="card">
    <div class="card-header">
        <h5>フォームの自動入力・クリア</h5>
    </div>
    <div class="card-body">
        <label class="form-control-label" for="address">住所</label>
        <input class="form-control" type="text" id="address" value="東京都千代田区千代田1-1-1">
        <div class="mt-3">
            <div class="d-flex">
                <label for="shippingAddress">配送先住所</label>
                <input class="form-check-input ms-4 me-2" type="checkbox" value="" id="isSameAddress">
                <label class="form-check-label" for="isSameAddress">上記住所と同じ</label>
            </div>
            <input class="form-control" type="text" id="shippingAddress" value="">
        </div>
    </div>
<div>

# jQuery

$("#isSameAddress").click(function() {
    if ($(this).prop("checked")) {
        $("#shippingAddress").val($("#address").val());
    } else {
        $("#shippingAddress").val("");
    }
});

要素を複製・削除する

# HTML

<div class="card my-3">
    <div class="card-header">
        <h5>要素を複製・削除する</h5>
    </div>
    <div class="card-body">
        <label class="form-control-label" for="">家族の名前を入力</label>
        <div class="d-flex mb-3 family-name">
            <div class="col-9">
                <input class="form-control col-10"type="text" >
            </div>
            <div class="ms-4 col-2">
                <button class="btn btn-danger delete-family">削除</button>
            </div>
        </div>
        <button class="btn btn-primary" id="addFamilyButton">追加</button>
    </div>
</div>

# jQuery

// 要素を複製する
$("#addFamilyButton").click(function () {
    let clonedElem = $(".family-name").first().clone();
    clonedElem.val("");
    clonedElem.insertAfter($(".family-name").last());
});

// 要素を削除する
$(document).on("click", ".delete-family", function () {
    // 要素が1つのときは削除できないようにする
    if ($(".family-name").length > 1) {
        $(this).parent().parent().remove();
    }                
});

要素の並び順を変える

# HTML

<div class="card my-3">
    <div class="card-header">
        <h5>要素の並び順を変える</h5>
    </div>
    <div class="card-body">
        <div class="card-body">
            <div class="d-flex col-10 my-2">
                <input class="form-control" value="田中">
                <button class="btn btn-light mx-2 move-up">↑</button>
                <button class="btn btn-light move-down">↓</button>
            </div>
            <div class="d-flex col-10 my-2">
                <input class="form-control" value="鈴木">
                <button class="btn btn-light mx-2 move-up">↑</button>
                <button class="btn btn-light move-down">↓</button>
            </div>
            <div class="d-flex col-10 my-2">
                <input class="form-control" value="佐藤">
                <button class="btn btn-light mx-2 move-up">↑</button>
                <button class="btn btn-light move-down">↓</button>
            </div>
        </div>
    </div>
</div>

# jQuery

$(".move-up, .move-down").click(function () {
    // クリックされた要素
    let clickedElem = $(this).parent();
    // クローン作製
    let clonedElem = clickedElem.clone(true);

    // 前の要素
    let prevElem = clickedElem.prev();            
    // 次の要素
    let nextElem = clickedElem.next();

    // クローンした要素を挿入して元の要素を削除
    if ($(this).hasClass('move-up') && prevElem.length) {
        prevElem.before(clonedElem);
        clickedElem.remove();
    }
    if ($(this).hasClass('move-down') && nextElem.length) {
        nextElem.after(clonedElem);
        clickedElem.remove();
    }
});

要素の表示・非表示を切り替える

# HTML

<div class="card my-3">
    <div class="card-header">
        <h5>要素の表示・非表示を切り替える</h5>
    </div>
    <div class="card-body">
        <div class="d-flex mb-2">
            <div class="form-check col-2">
                <input class="form-check-input" type="radio" name="isVisible" value="1" id="visible" checked>
                <label class="form-check-label" for="visible">表示</label>
            </div>
            <div class="form-check col-2">
                <input class="form-check-input" type="radio" name="isVisible" value="0" id="invisible">
                <label class="form-check-label" for="invisible">非表示</label>
            </div>
        </div>
        <div class="col-4" style="height: 100px; background-color: lightblue;" id="block"></div>
    </div>
</div>

# jQuery

$("input[name='isVisible']").change(function () {
    if ($(this).val() === "1") {
        $("#block").show();
    } else {
        $("#block").hide();
    }
});

要素の見た目（style属性）を切り替える

# HTML
<div class="card my-3">
    <div class="card-header">
        <h5>要素の見た目（style属性）を切り替える</h5>
    </div>
    <div class="card-body">
        # CSSを更新する
        <div class="d-flex mb-2">
            <div class="form-check col-2">
                <input class="form-check-input" type="radio" name="color" value="red" id="red">
                <label class="form-check-label" for="red">赤</label>
            </div>
            <div class="form-check col-2">
                <input class="form-check-input" type="radio" name="color" value="blue" id="blue">
                <label class="form-check-label" for="blue">青</label>
            </div>
            <div class="form-check col-2">
                <input class="form-check-input" type="radio" name="color" value="green" id="green">
                <label class="form-check-label" for="green">緑</label>
            </div>
        </div>
        <div class="col-6 border" style="height: 100px;" id="blockColor"></div>

        # classを追加・削除する
        <div class="d-flex mt-4">
            <div class="col-2 tab" data-tab="1">タブ1</div>
            <div class="col-2 tab" data-tab="2">タブ2</div>
            <div class="col-2 tab" data-tab="3">タブ3</div>
            <div class="col-2 tab" data-tab="4">タブ4</div>
        </div>
    </div>
</div>

# CSS

.tab {
    text-align: center;
    border: 1px solid lightblue;
    margin-right: 5px;
    padding: 5px;
    color: #AAA;
}
.selected-tab {
    text-align: center;
    border: 1px solid lightblue;
    margin-right: 5px;
    padding: 5px;
    background-color: lightblue;
    color: black;
}

# jQuery

# CSSを更新する
$("input[name='color']").change(function () {
    if ($(this).val() === "red") {
        $("#blockColor").css("background-color", "red");
    } else if ($(this).val() === "blue") {
        $("#blockColor").css("background-color", "blue");
    } else if ($(this).val() === "green") {
        $("#blockColor").css("background-color", "green");
    }
});

# classを追加・削除する
$(".tab").click(function () {
    $(".tab").not(this).removeClass("selected-tab");
    $(this).addClass("selected-tab");
});

備考

BootStrap5.3.0
jQuery3.6.0

おすすめ書籍

jQuery標準デザイン講座

巻末のjQueryリファレンスで要素の取得方法が一覧で見られます。こちらの書籍で基本的な動きを覚えればかなり多彩なアニメーションが実装できるようになります。
私はjQueryの書籍はこの1冊しか読んでいませんが実務にも大いに役立っています。