はじめに Flash Flash JavaScript jquery JavaScript jquery Web プログラム 経 験 の 少 ないデザイナーでも 容 易 に 理 解 できる 構 成 jquery jquery jquery 1 Web jquery Web SB 23 11 3
Contents コードの 解 説 39 サンプルコードを 書 き 替 えてみよう! 40 Column 数 値 と 文 字 列 の 違 いに 注 意 する 42 Contents jquery の 最 も 基 本 的 な 構 文 の 解 説 42 HTML の 準 備 が 整 うのを 待 つ 仕 組 み 46 ここまでのまとめ 48 本 書 のサンプルデータ 2 jquery の 基 礎 知 識 と 本 書 の 特 徴 13 - jquery の 基 礎 知 識 14 jquery とは 14 jquery の 特 徴 と 広 く 利 用 されている 理 由 17 Column ライブラリ プラグイン 関 数 拡 張 ライブラリの 違 い 22 - 本 書 の 目 的 と 構 成 23 本 書 の 目 的 と 特 徴 的 な 解 説 方 法 23 本 書 の 構 成 24 Column css() メソッドに 関 する 追 加 説 明 49-03 STEP 2 タイミングをコントロールしてみよう 51 コードの 解 説 52 サンプルコードを 書 き 替 えてみよう! 54 メソッドチェーンとは 57 ここまでのまとめ 58 - STEP 3 アニメーションさせてみよう 59 コードの 解 説 59 サンプルコードを 書 き 替 えてみよう! 61 その 他 の 主 な 引 数 62 Column さまざまなイージング 64 animate() メソッドの 仕 様 に 関 する 注 意 点 66 ここまでのまとめ 68-03 jquery の 実 行 環 境 の 準 備 28 サンプルファイルのダウンロード 28 jquery のダウンロード 30 - デバッグ 方 法 32 Chrome を 使 用 したデバッグ 32 Safari を 使 用 したデバッグ 33 03 jquery の 基 本 的 な 書 き 方 69 03- データを 格 納 するさまざまな 入 れ 物 70 オブジェクトとは 70 変 数 とは 71 3ステップではじめるかんたんjQuery 入 門 35 - 体 験 することからはじめよう! 36 サンプルファイルについて 36 本 書 の 解 説 の 流 れ 38 Column JavaScript の 記 述 場 所 38 - STEP 1 CSS のスタイルを 変 更 してみよう 39 配 列 とは 75 特 殊 な 入 れ 物 this 77 03- 特 定 の 機 能 をまとめる 関 数 82 関 数 とは 82 用 意 されている 関 数 とオリジナルの 関 数 83 関 数 の 作 り 方 83 関 数 の 呼 び 出 し 方 84 無 名 関 数 85 Column 無 名 関 数 を 変 数 に 格 納 する 86 4 5
Contents 03-03 スコープと 命 名 規 則 87 スコープ 87 変 数 名 と 関 数 名 の 命 名 規 則 88 Column 変 数 や 関 数 (メソッド)の 返 り 値 を 確 認 する 方 法 89 03- 演 算 子 90 算 術 演 算 子 90 代 入 演 算 子 90 比 較 演 算 子 91 論 理 演 算 子 92 03- 主 な 制 御 文 93 条 件 分 岐 _ if 文 93 条 件 分 岐 _ switch 文 95 繰 り 返 し 処 理 _ for 文 96 - 見 え 隠 れするサイドバー 123 サイドバーの HTML 123 サイドバーの CSS 124 サイドバーの JavaScript(jQuery) 125 button 要 素 がクリックされた 際 に 最 初 に 実 行 される 処 理 126 if 文 による 分 岐 処 理 126 Column toggleclass() addclass() removeclass() メソッド 128 - タイポグラフィの 表 現 129 タイポグラフィ 表 現 の HTML 129 タイポグラフィ 表 現 の CSS 130 タイポグラフィ 表 現 の JavaScript(jQuery) 130 プラグインの 使 い 方 131 Column プラグイン jquery.typoshadow.js の 処 理 内 容 132 確 かな 基 礎 力 を 養 う jquery の 基 本 テクニック 99 活 用 の 幅 を 広 げる jquery の 必 修 テクニック 133 - さまざまなホバーエフェクトで 学 ぶ 動 きのある 表 現 の 基 本 100 ホバーエフェクトの HTML 100 ホバーエフェクトの CSS 1 1 行 目 のボタンの JavaScript(jQuery) 1 2 行 目 のボタンの JavaScript(jQuery) 1 3 行 目 のボタンの JavaScript(jQuery) 1 - 画 像 とキャプションの 表 現 109 キャプション 表 現 の HTML 109 キャプション 表 現 の CSS( 共 通 部 分 ) 110 1 つめの 画 像 のキャプション 表 現 111 Column filter() メソッドと find() メソッドの 違 い 113 2 つめの 画 像 のキャプション 表 現 114 3 つめの 画 像 のキャプション 表 現 115-03 丸 いボタンのレイアウト 118 丸 いボタンの HTML 118 丸 いボタンの CSS 119 - Basic 滑 らかな 動 きのスライドショー 135 スライドショーの 概 要 135 スライドショーの 処 理 の 流 れ 135 スライドショーの HTML と CSS 136 スライドショーの JavaScript(jQuery) 137 変 数 の 準 備 138 スライドショーの 実 行 140 Column JavaScript が 無 効 になっている 場 合 を 考 慮 する 143 - Advanced 多 機 能 なスライドショー 144 スライドショーの 概 要 144 スライドショーの HTML 145 スライドショーの 構 造 146 スライドショーの CSS 147 スライドショーの JavaScript(jQuery) 150 変 数 の 準 備 153 スライドの 配 置 と インジケーターの 生 成 挿 入 154 スライドショーを 動 かす 各 機 能 の 概 要 156 丸 いボタンの JavaScript(jQuery) 120 6 7
Contents 任 意 のスライドを 表 示 する 関 数 _ gotoslide() 関 数 156 ナビゲーションとインジケーターの 状 態 を 更 新 する 関 数 _ updatenav() 関 数 158 クリックイベントに 処 理 を 登 録 する 160 タイマーの 開 始 と 一 時 停 止 _ starttimer() 関 数 と stoptimer() 関 数 162 スライドショーの 開 始 163 Column タイマーの 仕 組 み 164-03 Basic スティッキーヘッダー 165 スティッキーヘッダーの 概 要 165 処 理 の 流 れ 166 スティッキーヘッダーの HTML と CSS 166 スティッキーヘッダーの JavaScript(jQuery) 168 変 数 の 準 備 169 jquery UI Tabs の 基 本 的 な 使 い 方 193 ハイライトの 位 置 を 調 整 する 関 数 _ movehighlight() 関 数 194-07 Basic スムーズスクロール 196 スムーズスクロールの 仕 組 み 196 スムーズスクロールの HTML と CSS 197 スムーズスクロールの JavaScript(jQuery) 197 クリックイベントへの 処 理 の 登 録 198 scrolltop プロパティを 利 用 できる 要 素 の 検 出 199-08 Advanced 拡 張 性 のあるスムーズスクロール 200 スムーズスクロールの 仕 組 み 200 スムーズスクロールの HTML と CSS 2 スムーズスクロールの JavaScript(jQuery) 2 Column 任 意 のページ 内 リンクでスムーズスクロールを 有 効 にする 方 法 2 ウィンドウのスクロールイベントを 監 視 する 処 理 170 ウィンドウのスクロールイベントを 発 生 させる 処 理 171 - Advanced デザインが 変 化 するスティッキーヘッダー 173 スティッキーヘッダーの 概 要 173 06 高 機 能 なギャラリーページを 作 ってみよう! 203 スティッキーヘッダーの 仕 組 み 174 スティッキーヘッダーの HTML と CSS 174 スティッキーヘッダーの JavaScript(jQuery) 176 変 数 の 準 備 177 HTML 要 素 の 挿 入 179 ウィンドウがスクロールされた 際 の 処 理 179 - Basic 画 面 領 域 を 有 効 活 用 できるタブ 181 タブの 仕 組 み 181 タブの HTML 182 タブの CSS 183 タブの JavaScript(jQuery) 184 変 数 の 準 備 185 タブがクリックされたときの 処 理 185-06 Advanced 高 機 能 で 拡 張 しやすいタブ 188 タブの 仕 組 み 188 jquery UI とは 189 タブの HTML 190 タブの CSS 191 タブの JavaScript(jQuery) 192 変 数 の 準 備 193 06- ギャラリーページの 全 体 像 2 ギャラリーページの 主 な 機 能 2 本 章 の 解 説 の 流 れ 2 06- Basic シンプルなギャラリーページの 作 成 206 動 作 確 認 に 関 する 注 意 点 206 2 つの JavaScript ライブラリ 206 ギャラリーページの HTML と CSS 208 ギャラリーページの 元 データの 構 造 209 ギャラリーページの JavaScript(jQuery) 211 このサンプルの 処 理 対 象 となる HTML 要 素 212 Masonry の 準 備 212 $.getjson() メソッドによる JSON データの 取 得 213 $.each() メソッドによるループ 処 理 213 HTML 文 字 列 の 生 成 215 Masonry による 各 要 素 のレイアウト 217 Column JavaScript による 文 字 列 の 記 述 方 法 219 06-03 Advanced フィルタリング 機 能 を 持 つ ギャラリーページの 作 成 220 8 9
Contents 今 回 追 加 する 機 能 の 概 要 220 関 数 の 分 離 221 Basic 版 との 主 な 違 い 222 ギャラリーサイトの HTML 223 ギャラリーサイトの CSS 224 ギャラリーサイトの JSON 225 ギャラリーを 初 期 化 する 関 数 _ initgallery() 関 数 226 アイテム 群 を 生 成 し ドキュメントに 挿 入 する 関 数 _ additems() 関 数 228 Column 正 規 表 現 の 基 本 231 フィルタリング 機 能 の 仕 組 み 233 アイテムのフィルタリング 機 能 _ filteritems() 関 数 234 ラジオボタンのカスタマイズ 236 06- Advanced 選 択 画 像 の 拡 大 機 能 とキャプションの 追 加 237 今 回 追 加 する 機 能 の 概 要 237 Colorbox のダウンロードと 読 み 込 み 238 Colorbox の 実 行 238 06- Advanced マウスの 移 動 方 向 による ホバーエフェクト 機 能 の 追 加 240 今 回 追 加 する 機 能 の 概 要 240 ホバーエフェクトの HTML 241 ホバーエフェクトの CSS 242 ホバーエフェクトの JavaScript(jQuery) 242 オーバーレイのアニメーション_ hoverdirection() 関 数 243 Column 通 常 の 関 数 と 即 時 関 数 の 違 い 246 マウスの 方 向 を 検 出 する_ getmousedirection() 関 数 247 画 像 の 読 み 込 み 状 況 の 監 視 とプログレス 表 示 への 反 映 255 画 像 の 読 み 込 み 状 況 をプログレス 表 示 に 反 映 する_ updateprogress() 関 数 256 プログレス 表 示 の 終 了 処 理 258 07- 画 像 シーケンスのアニメーション 260 画 像 シーケンスのアニメーションの 概 要 260 アニメーションの 仕 組 み 261 画 像 シーケンスのアニメーションの HTML 261 画 像 シーケンスのアニメーションの CSS 262 画 像 シーケンスのアニメーションの JavaScript(jQuery) 262 使 用 する 変 数 の 準 備 265 マウスホイールイベントの 取 得 265 アニメーションの 開 始 _ startanimation() 関 数 266 アニメーションの 内 容 _ animatesequence() 関 数 267 アニメーションの 終 了 _ stopanimation() 関 数 269 全 画 面 表 示 269 07-03 回 転 のアニメーションによる インフォグラフィック 272 インフォグラフィックとは 272 今 回 のサンプルのポイント 273 パイチャートの 仕 組 み 273 インフォグラフィックの HTML 274 インフォグラフィックの CSS 275 transform プロパティのアニメーション 277 インフォグラフィックの JavaScript(jQuery) 278 各 チャートの 処 理 - 準 備 279 07 jquery を 活 用 したさまざまな 表 現 249 07- 画 像 の 読 み 込 みのプログレス 表 示 機 能 251 プログレス 表 示 機 能 の 概 要 251 プログレス 表 示 に 必 要 な 処 理 252 プログレス 表 示 の HTML と CSS 252 プログレス 表 示 の JavaScript(jQuery) 253 表 示 に 必 要 な 要 素 を jquery オブジェクト 化 254 各 チャートの 処 理 - 角 度 の 操 作 280 07- マスクのアニメーション 284 今 回 のサンプルの 仕 組 み 284 マスクのアニメーションの HTML 285 マスクのアニメーションの CSS 286 animate() メソッドで CSS の clip プロパティを 操 作 する 方 法 287 マスクのアニメーションの JavaScript(jQuery) 287 マスクのアニメーション 290 10 11
Appendix jquery リファレンス 291 Core -コア 292 Selectors -セレクタ 293 Traversing - 検 索 296 Attributes/CSS - 属 性 と CSS 298 Manipulation - 操 作 300 Events -イベント 303 Effects -エフェクト 3 Ajax 3 Utilities -ユーティリティ 306 本 書 で 使 用 している 外 部 ファイル 307 Normalize.css 307 Modernizr 308 HTML5 Shiv 309 索 引 311 12
3 ステップではじめるかんたん jquery 入 門 体 験 することからはじめよう! - 体 験 することからはじめよう! index.html html サンプルファイルの HTML index.html jquery JavaScript Web jquery 適 切 な 順 番 で jquery の 機 能 や 使 用 方 法 を 学 んでいくことが 必 要 3 jquery JavaScript STEP 1 CSS のスタイルを 変 更 してみよう <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>creative jquery</title> <link rel="stylesheet" href="./css/normalize.css"> <link rel="stylesheet" href="./css/main.css"> <script src="./js/vendor/jquery-1.10.2.min.js"></script> <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script> <script src="./js/main.js"></script> </head> <body> ❶ ❷ STEP 2 タイミングをコントロールしてみよう STEP 3 アニメーションさせてみよう 3 jquery 見 た 目 の 表 現 サンプルファイルについて [] index.html <header class="page-header" role="banner"> <h1>creative jquery Sample</h1> </header> <div class="page-main" role="main"> <div id="typo"> <div class="inner">creative jquery</div> </div> </div> <footer class="page-footer" role="contentinfo"> <small class="copyright">copyright <a href="http://www.shiftbrain.co.jp" target="_blank"> SHIFTBRAIN Inc.</a> </small> </footer> </body> </html> 03 06 07 Appendix Fig index.html head CSS ❶ normalize.css P.307 3 JavaScript ❷ main.js * 1 main.js *1 main.js よりも 先 に( 上 部 で) 読 み 込 んでいる 2 つのファイルは jquery のファイルと jquery の 拡 張 ライブラリである jquery UI です jquery UI については これを 使 用 するタイミングで 別 途 説 明 します 36 37
3 ステップではじめるかんたん jquery 入 門 本 章 の 解 説 の 流 れ STEP 1 - CSS のスタイルを 変 更 してみよう CSS のスタイルを 変 更 してみよう (1)main.js をエディタで 編 集 する (2) 編 集 後 にブラウザで 開 き 動 作 確 認 を 行 う main.js jquery CSS のスタイル main.js JavaScript CSS のスタイルの 変 更 (#typo の 要 素 の 変 更 ) main.js $(function(){ $('#typo').css('color', '#ebc000'); }); Point! Column JavaScript の 記 述 場 所 JavaScript は HTML 内 に 直 接 記 述 する 方 法 と 外 部 ファイルに 記 述 して 読 み 込 む 方 法 があります が 本 書 では 外 部 ファイル(main.js)に 記 述 して 読 み 込 む 方 法 を 採 用 しています HTML に 記 述 する 方 法 は 手 軽 ではあるのですが HTML と JavaScript が 1 つのファイル にまとまってしまうため Web サイトが 複 雑 になればなるほど 管 理 性 や 更 新 性 が 損 なわれ てしまいます 現 在 では 外 部 ファイルに 記 述 して 読 み 込 む 方 法 が 一 般 的 に 採 用 されています なお 外 部 ファイルに 記 述 して 読 み 込 む 方 法 の 場 合 は js ファイルの 読 み 込 む 順 番 に 注 意 が 必 要 です 上 記 では jquery の js ファイルを 先 に 読 み 込 んでから main.js を 読 み 込 んで いるのがわかると 思 います このように 先 に jquery を 読 み 込 んでおかないと main.js のプログラムから jquery を 使 用 することはできません(エラーになります) main.js #typo * 1 Fig CreativejQuery と 書 かれた 箇 所 の 変 更 コードの 解 説 2 JavaScript 1 つめのパート main.js $(function(){ //2つめのパートが 記 述 されている }); 03 06 07 Appendix *1 #typo の 要 素 が 変 化 しない 場 合 は 記 述 ミスをしている 可 能 性 があります ブラウザの 開 発 者 ツールを 起 動 してコンソールを 確 認 してみましょう(P.32) 38 39
3 ステップではじめるかんたん jquery 入 門 - CSS のスタイルを 変 更 してみよう JavaScript 2 つめのパート main.js $('#typo').css('color', '#ebc000'); 1 ( P.46) * 2 2 CSS Fig 変 更 例 1の 表 示 Fig スタイルを 変 更 するコードの 内 容 $(' ').css(' ', ' '); Table 要 素 セレクタ プロパティ 値 書 き 換 え 可 能 な 箇 所 説 明 ここには CSS と 同 じセレクタを 指 定 できる サポートされていないものも 多 少 あるが 特 定 の 要 素 を 指 定 するのに 困 ることはない CSS のプロパティを 指 定 する プロパティに 設 定 する 値 を 指 定 する セレクタ に 該 当 する 要 素 の CSS の プロパティ を 値 に 変 更 する CSS * 3 Web JavaScript CSS * 4 サンプルコードを 書 き 替 えてみよう! CSS3 transform rotate() * 5 1 JavaScript 変 更 例 2 main.js $(function(){ $('.page-main > div:nth-child(1).inner').css('opacity', 0.5); }); #typo.inner jquery :nth-child() CSS3 opacity 0.5 50% * 6 Fig 変 更 例 2の 表 示 03 06 07 Appendix HTML HTML jquery JavaScript 変 更 例 1 main.js $(function(){ $('#typo.inner').css('transform', 'rotate(10deg)'); }); * 2 * 3 * 4 1 つめのパートのコードにはコメントアウトが 含 まれています // 以 降 の 文 字 列 は 行 末 までコメントアウトされます 複 数 行 のコメントアウトは CSS と 同 じ /* コメント */ です jquery では 該 当 する 各 要 素 の style 属 性 の 情 報 を 書 き 換 えることで CSS を 適 用 します そのため CSS で!important を 使 用 している 項 目 は その 設 定 が 優 先 されるので 注 意 してください Flash や CSS3 canvas などによる 表 現 は 除 きます * 5 transform プロパティには 通 常 はベンダープレフィックスが 必 要 ですが( 執 筆 時 点 ) プロパティのベンダープレフィックス は jquery が 自 動 的 に 付 加 してくれます ただし 値 にベンダープレフィックスが 必 要 な 場 合 は 付 加 した 文 字 列 を 渡 す 必 要 が あります * 6 IE8 以 下 では opacity( 不 透 明 度 )の 指 定 方 法 が 異 なりますが jquery が 自 動 的 に 差 異 を 吸 収 してくれるので 統 一 的 に opacity と 0 1 の 数 値 で 指 定 できます 40 41
3 ステップではじめるかんたん jquery 入 門 - CSS のスタイルを 変 更 してみよう Column 数 値 と 文 字 列 の 違 いに 注 意 する 命 令 の 内 容 :jquery メソッドと 引 数 命 令 の 内 容 上 記 でいくつかの 指 定 例 を 示 しましたが 値 の 指 定 方 法 が 2 通 りあることに 気 づいたでしょ うか 最 初 の 例 では css('color', '#ebc000') のように 値 を ' (シングルクォーテー ション)で 囲 っていますが 2 つめの 例 では css('opacity', 0.5) のように 直 接 数 値 を 指 定 しています これらの 見 た 目 はそれほど 変 わりませんが プログラム 的 には 大 きく 異 なる ので 注 意 してください jquery では ' や " には 以 下 のような 役 割 があります 重 要 ' (シングルクォーテーション)または " (ダブルクォーテーション)で 囲 まれた 箇 所 は 文 字 列 として 認 識 されます そのため 文 字 列 以 外 例 えば 数 値 を 指 定 する 場 合 は ' や " で 囲 まずに 値 を 指 定 することが 必 要 です JavaScript はとても 寛 容 なプログラム 言 語 なので 数 値 を 指 定 すべき 箇 所 に ' を 記 述 し て 指 定 しても( 文 字 列 を 指 定 しても) 自 動 的 に 数 値 に 変 換 して 処 理 してくれる 場 合 があるので 必 ずしもエラーになるわけではありませんが エラーになる 場 合 もあるので なるべく 上 記 の ルールを 守 り 数 値 を 指 定 すべきところには 数 値 を 指 定 し 文 字 列 を 指 定 すべきところには 文 字 列 を 指 定 するように 心 がけてください jquery の 最 も 基 本 的 な 構 文 の 解 説 JavaScript 命 令 の 内 容 main.js css('color', '#ebc000'); css() () 'color' CSS '#ebc000' CSS の color プ ロ パ テ ィ に #ebc000 を 指 定 せよ css() JavaScript jquery jquery js css() main.js jquery jquery メソッド css() () CSS 引 数 * 7 jquery のメソッド css() 2 つの 引 数 'color', '#222' Fig スタイルを 変 更 するコードの 内 容.css('color', '#222'); 03 06 07 CSS 2 jquery の 基 本 的 な 構 文 と 考 え 方 命 令 の 対 象 :$() 関 数 と jquery オブジェクト Appendix JavaScript 2 つめのパート main.js $('#typo').css('color', '#ebc000'); jquery $('#typo') 命 令 の 対 象 css ('color', '#ebc000') 命 令 の 内 容 1 css() 命 令 の 対 象 id="typo" が 指 定 されて いる HTML 要 素 jquery HTML css() jquery JavaScript 命 令 の 対 象 部 分 main.js $('#typo') * 7 メソッドに 引 数 を 指 定 することを 引 数 を 渡 す といい メソッドを 実 行 することを メソッドを 呼 ぶ( 呼 び 出 す) といいます 42 43
3 ステップではじめるかんたん jquery 入 門 - CSS のスタイルを 変 更 してみよう $() CSS '#typo' css() CSS $() Fig 命 令 対 象 の 内 容 $('#typo'); </footer> </body> // 省 略 $('h1') jquery ❷ $() HTML 要 素 をもとにして jquery 独 自 の 要 素 を 生 成 する 関 数 HTML CSS $() jquery jquery オブジェクト Point! $() css() $() 関 数 命 令 文 の 前 に. (ドット)がついているものは メソッド ついていないものは 関 数 $('#typo') index.html HTML jquery ❶ $('#typo') jquery html jquery オブジェクトとして 変 換 される 要 素 (コード 内 の 赤 字 の 箇 所 ) index.html // 省 略 <body> <header class="page-header" role="banner"> <h1>creative jquery Sample</h1> </header> <div class="page-main" role="main"> // 省 略 Fig HTML 要 素 と jquery オブジェクトの 関 係 ❷ $( ) 03 06 07 html jquery オブジェクトとして 変 換 される 要 素 (コード 内 の 赤 字 の 箇 所 ) index.html Appendix // 省 略 <body> <header class="page-header" role="banner"> <h1>creative jquery Sample</h1> </header> $( ) <div class="page-main" role="main"> <div id="typo"> <div class="inner">creative jquery</div> </div> </div> <footer class="page-footer" role="contentinfo"> <small class="copyright">copyright <a href="http://www.shiftbrain.co.jp" target="_blank"> SHIFTBRAIN Inc.</a> </small> ❶ (1)$() 関 数 で 命 令 の 対 象 となる HTML 要 素 を jquery オブジェクトに 変 換 し (2)その jquery オブジェクトに 対 してメソッドを 呼 び 出 して 変 更 を 加 える jquery css() jquery jquery 44 45
3 ステップではじめるかんたん jquery 入 門 - CSS のスタイルを 変 更 してみよう Fig 主 な 登 場 人 物 の 関 係 図 html サンプルの HTML index.html $( ).. (ドット)と ; (セミコロン)の 役 割 (' ',' ') $() jquery css(). jquery オブジェク トと jquery メソッドをつなぐ 役 割 ; JavaScript JavaScript の 1 つの 命 令 が 終 わったら ; をつける Fig. (ドット)と ; (セミコロン)の 役 割 $( ). (' ',' ') HTML の 準 備 が 整 うのを 待 つ 仕 組 み 1 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>creative jquery</title> <link rel="stylesheet" href="./css/normalize.css"> <link rel="stylesheet" href="./css/main.css"> <script src="./js/vendor/jquery-1.10.2.min.js"></script> <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script> <script src="./js/main.js"></script> ❶ </head> <body> // 省 略 </body> </html> HTML コードが 記 述 された 順 番 通 り 1 <!DOCTYPE html> html head <meta charset="utf-8"> <script src="./js/main.js"></script> main.js ❶ main.js main.js HTML head 1 $(function (){ }); 予 約 状 態 HTML 03 06 07 Appendix JavaScript 1 つめのパート main.js $(function(){ //2つめのパートが 記 述 されている }); JavaScript ブラウザが HTML を 最 後 まで 読 み 込 むのを 待 つための 仕 組 み $(function(){ //HTMLがロードした 後 に 実 行 する 処 理 }); 1 スクリプトが 動 作 していない HTML index.html jquery HTML 46 47
3 ステップではじめるかんたん jquery 入 門 ここまでのまとめ jquery jquery で CSS のスタイルを 変 更 する 方 法 数 値 と 文 字 列 の 違 い jquery メソッドや $() 関 数 jquery オブジェクトの 概 要 と 関 係 性. (ドット)と ; (セミコロン)の 役 割 HTML の 準 備 が 整 うのを 待 つ 仕 組 み (1)main.js にサンプルコードを 記 述 する (2)ブラウザで index.html の 表 示 内 容 を 確 認 する (3) 記 述 したサンプルコードの 解 説 (4)コードを 自 由 に 書 き 替 えてみる (5)ブラウザで index.html の 表 示 内 容 を 確 認 する (6)サンプルコードを 使 用 した jquery の 基 本 解 説 48