
速習+詳細+実例 jQuery講座
素早く、詳しく、実例で学ぶ
jQuery総合講座
jQueryの概要を「速習jQuery」で学び、
APIドキュメントに沿った内容を「詳細jQuery」で学び、
jQueryを利用したプログラムを「実例jQuery」で書く、jQueryの講座です。
このコースは、jQuery公式のAPIドキュメントの知識を網羅しています。セレクタを使ったDOM要素の操作から、イベント、エフェクト、Ajax、Deferredまでの、基礎知識から実際の利用までをカバーしています。
このコースを学んだ人は、3段階の講座で、jQueryを徹底的に深く使いこなせるようになります。
まずは「速習jQuery」で、jQueryの概要を学びます。
次に「詳細jQuery」で、APIドキュメントに沿った内容を詳細に学びます。
最後に「実例jQuery」で、jQueryを利用したプログラムを書けるようになります。
-
速習jQuery
- 基本編(jQueryとは何か?から、セレクタの利用までを紹介)
- API編(イベント、要素の操作、横断、要素の作成、要素の追加、エフェクトを紹介)
- 上級編(Ajax、Deferred、プラグインの利用を紹介)
-
詳細jQuery
- jQuery
- セレクタ(基本、位置、種類と状態)
- 横断(兄弟親子、その他)
- イベント(基本、キー&マウス、汎用操作、eventオブジェクト)
- 属性操作
- CSS
- 縦横サイズ
- Data
- 操作
- エフェクト(シンプル、上級)
- Ajax
- Deferred
- Utilities
-
実例jQuery
- ブックマークレット
- Webページ上のアプリケーション
また、コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。
受講の際に必要なもの
- 事前の準備は特に必要ありません。
- 「Google Chrome」と「Atom」エディタで、開発を進めていきます。それらの導入の仕方も解説しています。
こんな方におすすめ
- jQueryについて総合的に学習したい方。
- jQueryを深く使いこなせるようになりたい方。
- jQueryとJavaScriptで、Webページ上のアプリケーションを作りたい方。
jQueryは、Webページ作成でよく利用されるJavaScriptのAPIです。このシンプルでパワフルなAPIを使いこなせるようになり、Web開発のスキルをアップしましょう!
About the Instructor

2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆を行う。
秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。
2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。
2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。
Course content
Section 1:イントロダクション | ||||
1 | イントロダクション | Preview | 1:30 | |
2 | サンプルコードのダウンロード | 1:00 | ||
3 | ソースコードについて | 0:24 | ||
4 | ブラウザについて | 2:57 | ||
5 | 文字コードについて | 1:24 | ||
6 | テキストエディタについて | 2:27 | ||
7 | JavaScriptの基本文法について | 1:01 | ||
Section 2:速習jQuery 基本編 | ||||
8 | [章頭] 速習jQuery 基本編 | 0:19 | ||
9 | 補足:Google Chromeのコンソール1 | 1:18 | ||
10 | jQueryとは | 2:53 | ||
11 | 1系、2系 | 1:31 | ||
12 | 読み込み方 | Preview | 3:30 | |
13 | ready | 3:23 | ||
14 | セレクタ | Preview | 6:49 | |
15 | [コラム] コンソールでのjQueryの利用 | 8:04 | ||
Section 3:速習jQuery API編 | ||||
16 | [章頭] 速習jQuery API編 | 0:27 | ||
17 | イベント | 3:47 | ||
18 | 要素の操作 | 6:10 | ||
19 | 要素の操作2 | 7:38 | ||
20 | 横断 | 4:03 | ||
21 | 要素の作成 | 3:22 | ||
22 | 要素の追加 | 5:15 | ||
23 | 要素の追加2 | 2:25 | ||
24 | エフェクト | 4:25 | ||
Section 4:速習jQuery 上級編 | ||||
25 | [章頭] 速習jQuery 上級編 | 0:18 | ||
26 | Ajax | 3:32 | ||
27 | ローカルサーバーを簡単に立てる | 2:39 | ||
28 | Deferred | 2:37 | ||
29 | Deferred2 | 5:24 | ||
30 | Deferred 並列 | 7:15 | ||
31 | プラグインの利用 | 2:36 | ||
Section 5:詳細jQuery jQuery | ||||
32 | [章頭] 詳細jQuery jQuery | 0:20 | ||
33 | 詳細jQueryの進め方 | 2:01 | ||
34 | 日本語で読めるAPIドキュメント | 1:36 | ||
35 | jQueryと$ | 2:26 | ||
36 | jQuery.noConflict() | 7:12 | ||
Section 6:詳細jQuery Selector セレクタ 基本 | ||||
37 | [章頭] 詳細jQuery Selector セレクタ基本 | 0:19 | ||
38 | 補足:Google Chromeのコンソール2 | 1:18 | ||
39 | APIドキュメント | 1:01 | ||
40 | 要素 | 1:00 | ||
41 | id | 1:05 | ||
42 | クラス | 0:58 | ||
43 | 属性 | 3:45 | ||
Section 7:詳細jQuery Selector セレクタ 位置 | ||||
44 | [章頭] 詳細jQuery Selector セレクタ 位置 | 0:17 | ||
45 | 補足:Google Chromeのコンソール3 | 1:20 | ||
46 | 選択した要素の番号 | Preview | 4:52 | |
47 | 先頭 | 2:44 | ||
48 | 末尾 | 2:24 | ||
49 | n番目 | 4:50 | ||
50 | 後 | 1:59 | ||
51 | 子孫や子 | 2:14 | ||
Section 8:詳細jQuery Selector セレクタ 種類と状態 | ||||
52 | [章頭] 詳細jQuery Selector セレクタ 種類と状態 | 0:20 | ||
53 | フォーム部品 種類 | 4:41 | ||
54 | フォーム部品 状態 | 3:13 | ||
55 | 状態 | 2:20 | ||
56 | 中身の状態 | 3:55 | ||
57 | 否定 | 1:10 | ||
58 | ヘッダー | 1:24 | ||
Section 9:詳細jQuery Traversing 横断 兄弟親子 | ||||
59 | [章頭] 詳細jQuery Traversing 横断 兄弟親子 | 0:20 | ||
60 | APIドキュメント | 1:29 | ||
61 | 兄弟系 | 3:37 | ||
62 | 兄弟系2 | 2:47 | ||
63 | 子系 | 3:00 | ||
64 | 親系 | 4:08 | ||
Section 10:詳細jQuery Traversing 横断 その他 | ||||
65 | [章頭] 詳細jQuery Traversing 横断 その他 | 0:18 | ||
66 | 絞り込み系 | 3:27 | ||
67 | 番号指定系 | 4:16 | ||
68 | 否定 | 1:36 | ||
69 | 選択追加系 | 2:51 | ||
70 | 選択破棄 | 1:40 | ||
71 | .each() | 2:18 | ||
72 | .map() | 2:15 | ||
73 | .is() | 2:18 | ||
Section 11:詳細jQuery Events イベント 基本 | ||||
74 | [章頭] 詳細jQuery Events イベント 基本 | 0:17 | ||
75 | APIドキュメント | 0:59 | ||
76 | イベントの設定と発火 | 1:49 | ||
77 | 準備完了 | 2:16 | ||
78 | クリック系 | 2:44 | ||
79 | フォーム系&シリアライズ | 7:22 | ||
80 | リサイズ&スクロール | 3:52 | ||
81 | フォーカス系 | 7:15 | ||
Section 12:詳細jQuery Events イベント キー&マウス | ||||
82 | [章頭] 詳細jQuery Events イベント キー&マウス | 0:19 | ||
83 | キー系 | 8:30 | ||
84 | ホバー | 2:25 | ||
85 | マウス系 | 5:37 | ||
86 | マウス系2 | 3:29 | ||
Section 13:詳細jQuery Events イベント 汎用操作 | ||||
87 | [章頭] 詳細jQuery Events イベント 汎用操作 | 0:19 | ||
88 | イベントのバブリング | 4:04 | ||
89 | オン | 6:35 | ||
90 | オフ | 3:36 | ||
91 | 1回のみ | 2:31 | ||
92 | イベント実行 | 4:03 | ||
Section 14:詳細jQuery Events イベント eventオブジェクト | ||||
93 | [章頭] 詳細jQuery Events イベント eventオブジェクト | 0:20 | ||
94 | eventオブジェクトとは | 1:51 | ||
95 | ターゲット系 | 5:47 | ||
96 | 情報系 | 2:12 | ||
97 | 停止系 | 5:29 | ||
98 | 受け取り系 | 3:49 | ||
Section 15:詳細jQuery Attributes 属性操作 | ||||
99 | [章頭] 詳細jQuery Attributes 属性操作 | 0:17 | ||
100 | APIドキュメント | 0:57 | ||
101 | value値の操作 | 2:19 | ||
102 | 属性の値を操作 | 4:28 | ||
103 | 属性プロパティの操作 | 6:32 | ||
104 | 属性プロパティの操作2 | 3:32 | ||
105 | クラスの操作 | 5:21 | ||
Section 16:詳細jQuery CSS | ||||
106 | [章頭] 詳細jQuery CSS | 0:15 | ||
107 | APIドキュメント | 0:47 | ||
108 | CSSの操作 | 6:15 | ||
109 | 位置の取得 | 6:03 | ||
110 | スクロールの操作 | 4:34 | ||
Section 17:詳細jQuery Dimensions 縦横サイズ | ||||
111 | [章頭] 詳細jQuery Dimensions 縦横サイズ | 0:17 | ||
112 | APIドキュメント | 0:38 | ||
113 | 縦横サイズ | 4:42 | ||
Section 18:詳細jQuery Data | ||||
114 | [章頭] 詳細jQuery Data | 0:15 | ||
115 | APIドキュメント | 1:59 | ||
116 | Dataの操作 | 6:07 | ||
Section 19:詳細jQuery Manipulation 操作 | ||||
117 | [章頭] 詳細jQuery Manipulation 操作 | 0:17 | ||
118 | APIドキュメント | 0:53 | ||
119 | 要素内の末尾や先頭に挿入 | 5:54 | ||
120 | 要素内にHTMLやテキストを設定 | 4:37 | ||
121 | 要素の後や前に挿入 | 5:09 | ||
122 | 削除 | 5:06 | ||
123 | 複製 | 2:49 | ||
124 | 置換 | 4:09 | ||
125 | ラップ | 5:16 | ||
Section 20:詳細jQuery Effects エフェクト シンプル | ||||
126 | [章頭] 詳細jQuery Effects エフェクト シンプル | 0:20 | ||
127 | APIドキュメント | 0:46 | ||
128 | 表示、非表示 | 3:33 | ||
129 | Duration、Easing、Callback | 7:46 | ||
130 | フェード | 4:13 | ||
131 | スライド | 3:11 | ||
132 | アニメイト | 4:45 | ||
Section 21:詳細jQuery Effects エフェクト 上級 | ||||
133 | [章頭] 詳細jQuery Effects エフェクト 上級 | 0:21 | ||
134 | エフェクトの接続 | 2:00 | ||
135 | 遅延 | 1:42 | ||
136 | 停止 | 7:26 | ||
137 | キュー | 6:11 | ||
138 | 設定 | 2:49 | ||
Section 22:詳細jQuery Ajax | ||||
139 | [章頭] 詳細jQuery Ajax | 0:15 | ||
140 | APIドキュメント | 0:39 | ||
141 | セキュリティ的な制限 | 3:36 | ||
142 | $.get() | 6:02 | ||
143 | $.getScript() | 2:35 | ||
144 | $.getJSON() | 8:01 | ||
145 | .load() | 3:36 | ||
146 | $.ajax() | 8:13 | ||
Section 23:詳細jQuery Deferred | ||||
147 | [章頭] 詳細jQuery Deferred | 0:16 | ||
148 | APIドキュメント | 0:49 | ||
149 | なぜDeferredが必要なのか? | 1:06 | ||
150 | 約束、実行、棄却 | 3:44 | ||
151 | 約束、実行、棄却2 | 5:24 | ||
152 | 直列処理 | 4:47 | ||
153 | 並列処理 | 5:43 | ||
154 | Ajax | 3:30 | ||
Section 24:詳細jQuery Utilities | ||||
155 | [章頭] 詳細jQuery Utilities | 0:13 | ||
156 | APIドキュメント | 1:29 | ||
157 | $.extend() | 8:32 | ||
158 | $.each()、$.map()、$.grep() | 6:16 | ||
Section 25:実例jQuery ブックマークレット | ||||
159 | [章頭] 詳細jQuery ブックマークレット | 0:18 | ||
160 | 実行の確認 | 4:26 | ||
161 | コードの解説 | 6:04 | ||
Section 26:実例jQuery 電卓 | ||||
162 | [章頭] 詳細jQuery 電卓 | 0:21 | ||
163 | 実行の確認 | 1:51 | ||
164 | コードの解説 | 5:38 | ||
165 | コードの解説2 | 6:34 | ||
Section 27:実例jQuery 記念日表示 | ||||
166 | [章頭] 詳細jQuery 記念日表示 | 0:22 | ||
167 | 実行の確認 | 1:30 | ||
168 | コードの解説 | 7:28 | ||
169 | コードの解説2 | 2:54 | ||
170 | コードの解説3 | 4:50 | ||
171 | コードの解説4 | 2:56 | ||
172 | コードの解説5 | 4:10 |