書籍概要

Books for Web Creative

WebデザイナーのためのjQuery入門

著者
発売日
更新日

概要

jQueryはいま最もウェブデザイナー,ウェブサイト制作者に注目されている技術と言っても過言ではありません。ウェブサイトにアコーディオン・タブ・ツールチップなどを組み込もうと思ったら,まずjQueryを使うのがセオリーとなりました。最近のウェブサイト調査によれば,jQueryの採用割合はFlashのそれを上回ったと言います。HTMLやCSSに比べて,敷居の高さを感じる方も多いかもしれませんが,本書ではjQueryの巧みな使い手である著者が,徹底的にやさしく,わかりやすく解説します。

こんな方におすすめ

  • jQueryの入門者
  • Webデザイナー
  • マークアップエンジニア

サンプル

目次

  • この本の構成
  • なぜjQueryか
  • 誰がjQueryを使うべきなのか
  • jQueryを使うことのメリット
  • 初めてJavaScriptを触る人へ
  • 木箱とパネル

Chapter1 jQueryをはじめよう

1.1 jQueryの大まかな概念

  • 「何かを取ってくる」→「それに何かする」
  • $とjQueryオブジェクト

1.2 jQueryを使うための準備

  • jQueryのダウンロード
  • ページの読み込み完了を待つ
  • コードの外部ファイル化
  • この本で使うHTMLのセット
  • Firebug

Chapter2 何かを取ってくる(基本その1)

2.1 「何かを取ってくる」機能

2.2 セレクタ

  • 難しいセレクタはあとで
  • IDセレクタ――#idValue
  • クラスセレクタ――.className
  • タイプセレクタ――element
  • 組み合わせてみる
  • 子孫セレクタ――ancestor descendant
  • より高機能なセレクタ

2.3 取ってきたところからさらに探す

  • 変数に保存する
  • jQueryと変数を組み合わせる
  • 内包する要素のなかからさらに探す――find
  • より高機能な「取ってきたところからさらに探す」機能

Chapter3 それに何かする(基本その2)

3.1 「それに何かする」機能

3.2 メソッド

3.3 スタイルを変更する

  • css
  • show/hide
  • width/height
  • まとめ

3.4 アニメーションさせる

  • fadeIn/fadeOut
  • slideDown/slideUp
  • animate
  • まとめ

3.5 内容や属性を変更する

  • text/html
  • empty
  • attr
  • val
  • addClass/removeClass
  • まとめ

3.6 動かす・消す・作る

  • append/appendTo
  • 要素を新しく作る
  • remove
  • まとめ

3.7 イベントを設定する

  • 太郎の面接
  • click――クリックされたとき
  • mouseenter/mouseleave――マウスがのったとき/おりたとき
  • hover――mouseenterとmouseleaveをいっぺんに
  • focus/blur――フォーカスが当たった/外れた
  • 同じ要素を二度取ってこないようにする
  • イベントとthis
  • $(DOM要素)
  • まとめ

3.8 それぞれについて処理する

  • each
  • 値や内容をセットする/取得する

3.9 まとめ

Chapter4 何か作ってみる

4.1 実用性の高いものを作ってみよう

4.2 ロールオーバー

  • 大まかなしくみ
  • 基本形
  • 発展形

4.3 テキスト入力フィールドのガイドテキスト

  • 大まかなしくみ
  • 基本形
  • 発展形

4.4 アコーディオン

  • 大まかなしくみ
  • 基本形
  • 発展形

4.5 外部ファイルから表作成

  • 大まかなしくみ
  • 基本形
  • 発展形

4.6 スライドショー

  • 大まかなしくみ
  • 基本形
  • 発展形

4.7 タブコンテンツ

  • 大まかなしくみ
  • 基本形
  • 発展形

4.8 ツールチップ

  • 大まかなしくみ
  • 基本形
  • 発展形

4.9 まとめ

Chapter5 プラグインにまとめる

5.1 プラグインとは

5.2 プラグインを使ってみよう

5.3 プラグインを書いてみよう

  • プラグイン形式と実行方法
  • オプション
  • $.extend

サポート

現在サポート情報はありません。

商品一覧