本稿は 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アノテーションとは
最近更新/作成されたページ
- X (Twitter) API でツイートできないがエラーが出ない問題の原因と対処 2026-10-03 11:33:01
- X (Twitter) API アプリケーション登録完全ガイド|v2・Bearer Token・OAuth 2.0 PKCE 2026-10-03 11:33:01
- X (Twitter) API 完全ガイド|従量課金の料金・単価(2026年10月)と v2 移行 2026-10-03 11:32:40
- Google DeepMind とは?Gemini・AlphaFold の開発元 2026-10-03 11:26:56
- Cursor とは?AI 統合型コードエディタの使い方・料金 2026-10-03 11:26:56
- Claude (Anthropic) とは?AIチャットの使い方・モデルファミリ・API 2026-10-03 11:26:56
- AIベンダー一覧:OpenAI・Anthropic・Google DeepMind・Microsoft・Meta 2026-10-03 11:26:56
- クラウド・インフラ完全ガイド — AWS/Azure/GCP/Kubernetes 2026-10-03 11:26:56
- テキストエディタ完全比較 (VS Code / Cursor / Vim / Emacs / IDE) 2026-10-03 11:26:56
- プログラミング学習プラットフォーム|Scratch・micro:bit ほか 2026-10-03 11:26:56
- Twitter (X) プラットフォーム完全ガイド 2026 (API / Premium / 競合) 2026-10-03 11:26:56
- Web サービスとは — SOAP/REST/SaaS と現代のサービス指向 2026-10-03 11:26:56
- Anthropic とは?Claude を開発する AI 企業 2026-10-03 11:26:55
- Midjourney とは?AI 画像生成サービスの使い方・料金プラン 2026-10-03 11:26:55
- OpenAI Codex とは?codex CLI / ChatGPT 内蔵コーディングエージェント 2026-10-03 11:26:55