ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
本稿は 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=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
人気ページ
- 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 Spring Frameworkのアノテーション一覧
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- PHP $_SERVERとは|DOCUMENT_ROOT・PHP_SELFなど主な要素 2026-08-07 17:15:57
- PHPでのファイルアップロード方法|multipart/form-dataと$_FILES 2026-08-07 17:15:57
- Scratchのアカウントの作り方|メールアドレスとユーザー名の登録手順 2026-08-07 17:15:57
- Bluetoothとは|仕組み・BLEとClassicの違い・用途 2026-08-07 17:15:57
- Spring Bootのテスト入門|@SpringBootTestとJUnitでの単体・結合テスト 2026-08-07 17:15:57
- djangoにおけるMVCアプリケーション実装例 2026-08-07 17:15:57
- Scratch 作品の公開方法 2026-08-07 17:15:56
- 【PHPフレームワーク】Laravelの使い方 2026-08-07 17:15:56
- Google OAuth 2.0 認証の実装方法 2026-08-07 17:15:56
- APIキー取得方法 2026-08-07 17:15:56
- インストール方法(Windows版) 2026-08-07 17:15:56
- Java とは?言語仕様・JVM・主要フレームワーク一覧 2026-08-07 17:15:56
- データベースとは?RDB / NoSQL / SQL の基礎 2026-08-07 17:15:56
- インストール(eclipseプラグイン) 2026-08-07 17:15:56
- Spring Frameworkの使い方 2026-08-07 17:15:56
コメントを削除してもよろしいでしょうか?