本稿は jQuery の文法に関する記事です。jQuery の基本形 ($(セレクタ).メソッド()) から、要素を選ぶためのセレクタ、UI を動かすためのイベント処理など、jQuery を使ううえで押さえるべき構文をまとめます。
子ページから対象の記事を選択してください。
本ページの子ページ
jQuery の基本形
|
// 1. セレクタで要素を選ぶ |
$ は 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() { |
Ajax の基本
|
$.ajax({ |
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()を使う
関連
- 親カテゴリ: jQuery
- 子ページ: 基本形 / セレクタ / イベント
- JavaScript本体: JavaScript
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript で base URL を取得する方法|window.location.origin
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 7 Spring Frameworkのアノテーション一覧
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Git pushした変更の取消し|revert・履歴変更と保護の注意点 2026-10-15 23:49:01
- Gitでローカルを戻す前に|reset・restoreの違いと退避範囲 2026-10-15 23:49:01
- Git rebaseの使い方|対象範囲・競合解決・pushの判断 2026-10-15 22:50:59
- Git pullの使い方|取込み先・ff-only・競合とstashの注意点 2026-10-15 22:50:59
- Git pushの使い方|送信先・タグ・force-with-leaseの条件 2026-10-15 22:12:47
- Git remoteの設定・確認・削除|SSH URLとfetch/pushの違い 2026-10-15 22:12:47
- Gitリモートリポジトリの作成|初回push・既存履歴・mirrorの注意 2026-10-15 15:48:16
- Gitのuser.name・user.email設定|local/global・確認と過去履歴の注意 2026-10-15 15:30:07
- LinuxにGitをインストール|配布元・初期設定・TLSと認証の確認 2026-10-15 15:30:06
- Git導入と初回push|Linuxサーバー・Windows/macOS・SSH設定 2026-10-15 14:51:54
- Db2のCREATE INDEX|索引定義・INCLUDEと実行計画の確認 2026-10-15 14:10:22
- Db2の自動採番|IDENTITY・ID取得とRESTARTの注意点 2026-10-15 14:10:22
- 【DB2】特定スキーマの全テーブルの全カラム情報を取得する方法 2026-10-15 13:53:15
- Db2のシーケンスとIDENTITYの違い|採番とカタログの確認SQL 2026-10-15 13:53:15
- Db2で複数カラムをUPDATEする方法|SET・WHEREと更新前の値 2026-10-15 13:53:15