ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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 と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?