文法

▶

本稿は jQuery の文法に関する記事です。jQuery の基本形 ($(セレクタ).メソッド()) から、要素を選ぶためのセレクタ、UI を動かすためのイベント処理など、jQuery を使ううえで押さえるべき構文をまとめます。

子ページから対象の記事を選択してください。

本ページの子ページ

基本形 — $(セレクタ).メソッド() の構造
セレクタ — id / class / 要素 / 子孫
イベント — click / submit / change / on

jQuery の基本形

// 1. セレクタで要素を選ぶ
$(".btn")

// 2. メソッドで操作
$(".btn").text("送信");

// 3. メソッドチェーン (戻り値も jQuery オブジェクト)
$(".btn").addClass("is-active").fadeIn(300);

$ は jQuery のショートカットです。両方とも同じ意味で、競合する場合は jQuery.noConflict() で $ を解放できます。

主要な構文カテゴリ

カテゴリ	概要	例
セレクタ	要素を選ぶ	`$("#id")` / `$(".class")` / `$("ul li")`
取得 / 走査	選んだ要素から関連要素へ	`.find()` / `.parent()` / `.children()`
属性 / プロパティ	属性・値の取得設定	`.attr()` / `.prop()` / `.val()` / `.data()`
CSS / クラス	見た目を変える	`.css()` / `.addClass()` / `.toggleClass()`
HTML / テキスト	中身を読み書き	`.text()` / `.html()` / `.append()`
イベント	クリック等の反応	`.on("click", fn)` / `.off()`
エフェクト	表示・アニメーション	`.fadeIn()` / `.slideUp()` / `.animate()`
Ajax	サーバ通信	`$.ajax()` / `$.get()` / `$.post()`
ユーティリティ	反復・型判定	`$.each()` / `$.map()` / `$.isArray()`
準備完了	DOM 構築後に実行	`$(function() { ... })` / `$(document).ready(fn)`

イベントの基本

$(function() {
// クリックでクラス切替
$(".btn").on("click", function() {
$(this).toggleClass("is-active");
});

// フォーム送信前にバリデーション
$("form#contact").on("submit", function(e) {
if ($("#name").val() === "") {
e.preventDefault(); // 送信中止
alert("名前を入力してください");
}
});

// 動的に追加された要素のイベント (委任)
$(document).on("click", ".dyn", function() { ... });
});

Ajax の基本

$.ajax({
url: "/api/users",
method: "GET",
dataType: "json"
})
.done(function(data) { console.log(data); })
.fail(function(xhr) { console.error(xhr.status); });

jQuery と素の DOM API

やりたいこと	jQuery	素の DOM
要素取得	`$(".btn")`	`document.querySelectorAll(".btn")`
クラス追加	`$(el).addClass("x")`	`el.classList.add("x")`
テキスト設定	`.text("...")`	`el.textContent = "..."`
イベント	`.on("click", fn)`	`el.addEventListener("click", fn)`
Ajax	`$.ajax()`	`fetch()`

注意点

jQuery のロード順に注意。本体を読み込む前に $ を使うと $ is not defined
DOM が出来上がる前に操作するため、コードは $(function() { ... }) の中に
新規プロジェクトでは素の DOM API + Fetch + 軽量ライブラリで十分なことが多い
古い jQuery 1.x / 2.x にはセキュリティ脆弱性 (XSS) があるバージョンが存在する。3.x の最新を使う
.html(externalInput) のように外部入力をそのまま埋め込まない (XSS)。.text() を使う

ページ一覧

その他

文法