jQueryとは

jQueryは、John Resigによって開発されたJavaScriptライブラリであり、\"Write Less, Do More\"（より少ないコードで、より多くのことを）という理念のもとに設計されています。軽量かつクロスブラウザ対応が強力で、DOM操作、イベント処理、アニメーション、AJAX通信を簡潔な構文で記述できる点が特徴です。豊富なプラグインエコシステムも存在しており、フロントエンド開発の効率を大幅に向上させます。

jQueryオブジェクトとDOMオブジェクト

jQueryオブジェクトは、DOM要素をラップしたものであり、jQuery独自のメソッド（例: .css(), .click()）を提供します。通常のDOMオブジェクト（例: document.getElementByIdの戻り値）とは異なり、これらを混在させて使用することはできません。

// jQueryオブジェクトの取得
var $contentElement = $("#content-display");
console.log($contentElement.html()); // jQueryメソッド

// DOMオブジェクトへの変換
var domElement = $contentElement[0];
console.log(domElement.innerHTML); // DOMプロパティ

// 命名規則：jQueryオブジェクトには変数名の先頭に$を付ける慣習があります

セレクタとトラバーサル

要素を特定するためのセレクタと、特定した要素から関連する要素を見つけるためのトラバーサルメソッドは、jQueryの核心です。

基本セレクタ

$("*")              // 全要素
$(".active-nav")    // class="active-nav"の要素
$("#primary-header")// id="primary-header"の要素
$("div")            // divタグ
$("button, .submit")// buttonタグまたは.submitクラス

階層セレクタ

$(".menu ul")       // .menuの子孫にあるul
$(".container > div") // .containerの直接の子div
$(".header + div")    // .headerの直後の兄弟div
$(".item ~ div")      // .itemの後にある全ての兄弟div

フィルタリングとトラバーサル

// フィルタ
$("li").eq(1)        // インデックスが1のli
$(".box").first()    // 最初の.box
$(".row").has(".active") // .activeを持つ.row

// ツリー探索
$(".parent").find(".child")     // 子孫の.child
$("#start").next()              // 次の兄弟要素
$("#start").nextAll()           // 後の全兄弟要素
$("#end").prev()                // 前の兄弟要素
$(".item").siblings()           // 全兄弟要素
$("#target").parents()          // 全祖先要素

イベント処理

ユーザーのアクションに対する反応を定義します。最新のjQueryでは、on()メソッドを中心にしたイベント委譲が推奨されます。

// ドキュメント読み込み完了時の処理
$(document).ready(function() {
    console.log("DOM Ready");
});

// ショートハンド $(function(){ ... });

// イベントバインディングと委譲
$("#task-list").on("click", ".delete-btn", function(e) {
    $(this).parent().remove(); // 動的に追加された要素にも対応
});

$("#add-task").click(function() {
    var $newItem = $('<li class="task">New Task <button class="delete-btn">X</button></li>');
    $("#task-list").append($newItem);
});

// マウスイベントの合成
$("#hover-zone").hover(
    function() { $(this).addClass("highlight"); }, // mouseenter
    function() { $(this).removeClass("highlight"); } // mouseleave
);

属性とCSSの操作

要素の属性、スタイル、コンテンツを動的に変更します。

// クラス操作
$("#panel").addClass("active");
$("#panel").removeClass("hidden");
$("#panel").toggleClass("visible");

// 属性の取得と設定
// 属性値（href, src, カスタムdata属性など）
var link = $("#external-link").attr("href");
$("#external-link").attr("target", "_blank");

// プロパティ（checked, selected, disabledなど）
var isChecked = $("#toggle-switch").prop("checked");
$("#toggle-switch").prop("disabled", true);

// 注意：チェックボックスなどの状態にはprop()を使用します
// attr("checked")は初期状態を返す場合があるため不適切です。

// スタイル
$("#box").css({
    "color": "#333",
    "background-color": "lightblue",
    "font-size": "16px"
});

// コンテンツ
$("#status").text("Loading...");   // テキストのみ
$("#content").html("<strong>Done</strong>"); // HTMLを含む
$("#username").val("JohnDoe");     // フォーム値

反復処理

jQueryオブジェクトのコレクションに対してループ処理を行います。

// 配列やオブジェクトのループ
var userData = [{name: "A"}, {name: "B"}];
$.each(userData, function(index, user) {
    console.log(index + ": " + user.name);
});

// jQuery要素セットのループ
$("tr").each(function() {
    var currentRow = $(this);
    console.log(currentRow.find("td").first().text());
    
    // return false を返すとbreak、return trueはcontinueに相当
    if (currentRow.hasClass("stop-here")) {
        return false;
    }
});

DOM操作（ドキュメントの更新）

要素の挿入、置換、削除、複製を行います。

// 作成
var $newDiv = $("<div class='card'></div>");

// 内部挿入
$("#container").append($newDiv);   // 末尾に追加
$newDiv.prependTo("#container");   // 先頭に追加

// 外部挿入
$("#header").before("<nav>Menu</nav>");
$("#footer").after("<p>End</p>");

// 置換と削除
$(".old-style").replaceWith("<div class='new-style'>Updated</div>");
$("#temporary").empty();   // 中身を消す
$("#obsolete").remove();   // 要素自体を消す

// 複製
$("#template").clone().appendTo("#list");

アニメーション効果

視覚的なフィードバックや状態遷移をスムーズに実装できます。

// 表示・非表示の切り替え
$("#toggle-btn").click(function(){
    $("#info-panel").toggle(500); // ミリ秒指定
});

// スライド
$("#slide-trigger").click(function(){
    $("#drawer").slideDown("slow");
});

// フェード
$("#fade-btn").click(function(){
    $("#overlay").fadeOut(1000, function() {
        console.log("Fade out complete");
    });
});

// カスタムアニメーション
$("#move-box").animate({
    left: '250px',
    opacity: '0.5'
}, 1000);

CSS寸法と位置情報

要素のサイズやスクロール位置、ドキュメント上の位置を取得・設定します。

// 位置
var pos = $(".box").position(); // 親要素からの相対位置
var offset = $(".box").offset(); // ドキュメント全体からの位置

// スクロール
$(window).scrollTop(0); // ページトップへ戻る
var scrollY = $(window).scrollTop();

// サイズ
var w = $(".container").width();      // コンテンツ幅
var innerW = $(".container").innerWidth(); // パディング込み
var outerW = $(".container").outerWidth(true); // マージン込み

プラグイン機構（拡張）

jQuery自体やプロトタイプ（fn）に機能を追加できます。

// ユーティリティ関数の追加
$.extend({
    log: function(msg) {
        console.log("[LOG] " + msg);
    }
});
$.log("System start"); // jQuery.log() として呼び出し

// メソッドチェーン対応のプラグイン追加
$.fn.highlight = function(color) {
    this.css("background-color", color || "yellow");
    return this; // thisを返してチェーンを維持
};

$(".special").highlight("orange").fadeOut(500);