知らなきゃ損！jQueryの便利テクニック5選で開発効率UP

.on() メソッドで複数のイベントを一度に設定

jQueryの.on()メソッドを使うと、複数のイベントを一度に設定することができます。特に似たようなイベントが複数必要な時に便利です。

$("button").on("mouseenter mouseleave", function() {
    $(this).toggleClass("hovered");
});

この例では、ボタン要素にマウスが乗ったり離れたりするたびにクラスがトグルされます。

.on() | jQuery API Documentation

api.jquery.com

$.each()で簡単にループ処理

jQueryの$.each()メソッドを使えば、配列やオブジェクトのループ処理が簡単に行えます。

const fruits = ["apple", "orange", "banana"];
$.each(fruits, function(index, value) {
    console.log(index + ": " + value);
});

$.each()は、DOM要素だけでなく配列にも使えます！

jQuery.each() | jQuery API Documentation

api.jquery.com

フェードイン・フェードアウトで要素を滑らかに表示/非表示

jQueryには.fadeIn()と.fadeOut()メソッドがあり、要素の表示/非表示にアニメーション効果を付けられます。使い方も簡単です。

$(".btn").click(function() {
    $(".content").fadeToggle(500);
});

この例では、ボタンをクリックするたびに500msかけて要素がフェードインまたはフェードアウトします。

$.ajax()でシンプルな非同期通信

jQueryの$.ajax()メソッドは、APIなどからデータを取得する際に便利です。直感的に書けるので、非同期通信が苦手でも簡単に使えます。

$.ajax({
    url: "https://api.example.com/data",
    type: "GET",
    dataType: "json",
    success: function(data) {
        console.log("取得したデータ:", data);
    },
    error: function(error) {
        console.error("エラーが発生:", error);
    }
});

非同期通信に関する設定がまとまっているので、管理がしやすいのも魅力です。

jQuery.ajax() | jQuery API Documentation

api.jquery.com

.toggleClass()で複雑なスタイルの切り替え

.toggleClass()メソッドを使うと、あるクラスが存在しない場合は追加し、存在する場合は削除します。スタイルの切り替えやボタンの状態変化などに使えます。

$("button").click(function() {
    $(this).toggleClass("active");
});

ボタンをクリックするたびにactiveクラスが付与/削除され、CSSを使って見た目や挙動を変えられます。

.toggleClass() | jQuery API Documentation

api.jquery.com