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

## フォームの自動入力・クリア
![f3c54222bfe3f96347e57a51370de0f7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488627/89aa9bb9-6057-5e24-80d1-2010dac1bf8a.gif)

```
# 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("");
    }
});
```

## 要素を複製・削除する
![7fde750d2c47b541df787b15e601ed19.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488627/a248b2cb-a3bf-7f49-1cdf-aa44c8123190.gif)

```
# 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();
    }                
});
```

## 要素の並び順を変える
![c08ab294df84a1e569b18d24ad16ec26.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488627/0beb36e0-66ad-e58a-ac4d-a0c0dacb8e2c.gif)

```
# 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();
    }
});
```

## 要素の表示・非表示を切り替える
![7aafa7d525dba16b9ad7ebc79208a83f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488627/153030dd-dc5a-b687-a30a-3a59a8a29b4f.gif)

```
# 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属性）を切り替える
![930ca582cde31f5518ce78c866f45b6e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488627/3a26e914-ded7-e721-fa0e-fe452ad9ad7d.gif)

```
# 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標準デザイン講座
![スクリーンショット 2024-12-08 3.04.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488627/9e189d55-0901-4a09-8d97-5380d69e4940.png)

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