jQuery入門道場 jQueryの使い方

本書の紹介

jQuery入門道場・電子書籍 当サイトの内容を電子書籍として販売させていただくことになりました。Amazon Kindleにてご購入いただけます。
本書の内容をご確認いただけるよう、5章までの内容をカット無しでWEB版で公開しております。


Kindle版の購入(キャンペーン特価 ¥350円)

電子書籍の形式と購入先

Amazon Kindle版では、PDFのような固定レイアウトではなく、リフロー型になります。リフロー型とは、見る端末により表示される情報量が増減するタイプになります。

書籍の目次とサンプル

サンプルは、リンクをクリックしてご覧ください。5章までは、本書と同じ内容をカット無しでご覧いただけますので、購入前の検討にご利用下さい。

詳細の目次は、この下をご覧ください。

本文中に紹介する実際のコード

下記のリンクよりご参照下さい。
実際のコード

正誤表

現在の所、ありません。
誤植等見つけましたら、下記のアドレスまでよろしくお願いします。

詳細の目次

まえがき
まず始めに
サンプルについて
予備知識の確認
JavaScriptの必要知識
HTMLのツリー構造
Firebug、Chromeデベロッパーツール
jQueryとは?
jQueryの便利さ
バージョンについて
jQueryを使ってみる
CDNを使ってjQueryを読み込む
jQueryの基本
jQueryの基本サンプル
$ 又はjQueryの基本的な使い方
(1) $("セレクター文字列") … セレクターとしての$()
(2) $(関数) … ドキュメント構築後に処理したい作業の登録用としてのjQuery()
(3) $("HTML文字列") … DOM要素の生成
(4) $(DOM要素 又は jQueryオブジェクト) … セレクター的役割
jQueryオブジェクトとは?
jQueryオブジェクト
メソッドチェーン
DOM要素の生成
DOM要素の生成
基本的なセレクター
要素(タグ)セレクター
クラスセレクター
IDセレクター
グループセレクター
ユニバーサルセレクター
属性セレクター
検索する対象(範囲)を指定する書き方
階層構造によるセレクター
子孫セレクター
子セレクター
隣接兄弟セレクター(Adjacent Sibling)
一般兄弟セレクター(General Sibling)
基本、子要素フィルター
少しまとめ
:first、:first-child
:last、:last-child
:nth-child()
:only-child
:even、:odd
:nth-child()、:even、:oddサンプル
:eq()、:gt()、:lt()
:not()
:header
:animated
コンテントフィルター
:contains()、:has()
:empty、:parent
フォーム系フィルター
フォームのタイプでの選択
フォームの状態での選択
表示・非表示でのフィルター
.is()フィルター
セレクト回数を減らそう
属性、CSS操作
.attr()
.removeAttr(name)
クラス操作
.addClass(name)
.removeClass([name])
.toggleClass()
.hasClass(name)
CSS操作
.css()
幅、高さ操作
.width()
.height()
.innerWidth()、.innerHeight()
.outerWidth()、.outerHeight()
スクロール操作
.scrollTop()
.scrollLeft()
座標位置
.offset()
.position()
HTML、テキスト、フォーム値の取得&設定
.html()、.text()
.val()
要素の追加等
.append()、.prepend()、.before()、.after()
.appendTo()、.prependTo()、.insertBefore()、.insertAfter()
包み込み、置換
.wrap()
.wrapAll()
.wrapInner()
.unwrap()
.replaceWith()
.replaceAll()
削除、クローン(コピー)
.remove()
.empty()
.clone()
横断(Traversing)
.first()
.last()
.eq()
.filter()
.not()
.find()
.end()
6章 jQueryオブジェクト操作
jQueryオブジェクト操作
.length
.each(function (index, element))
.get(n)、.get()
.toArray()
.map(function (index, element))
7章 イベント
イベントの基本
色々なイベント(ショートカット用イベント)
ショートカット用イベント
thisキーワード
thisは、流れに応じて変わる
バブリング(bubbling)とは
イベントオブジェクト
イベントオブジェクトの一覧
event.clientX、event.clientY
event.which
event.preventDefault()
event.stopPropagation()
return false
マウス関係のイベント
.mouseenter()、.mouseleave()、hover()
.mouseenter()、.mouseleave() と .mouseover()、.mouseout() の違い
.hover()メソッド と .on() と "hover"擬似イベント
マウスイベント用の.toggle()
.on()とイベント委譲
沢山の要素にイベントを付与したい時や動的に追加した要素もイベントの対象にしたい時
イベント委譲(Event Delegation)の流れ
.on()のまとめ
.on( events [, selector] [, data] , handler )
.on( events-map [, selector] [, data] )
.one()、off()、.trigger()、.triggerHandler()
.one()
.off()
.trigger()
.triggerHandler()
画像などの読み込みが完了してから処理を実行する
古いイベントメソッド
.bind()
.live()
.delegate()
従来のイベント付与とjQuery流イベント付与
8章 AJAX
AJAXとは?
AJAXとは?
jQueryのAJAX
AJAX前置き
AJAX前置き
$.ajax() 簡単なサンプル
$.ajax() 簡単なサンプル
$.ajax() 解説
$.ajax() 解説
$.get()、$.post()
$.get()
$.post()
.load()
.load()
$.getJSON()、$.getScript()
$.getJSON()
$.getScript()
.serialize()、.serializeArray()、$.param()
.serialize()
.serializeArray()
$.param()
$.ajaxSetup()(AJAX通信のデフォルト設定)
$.ajaxSetup(options)
AJAX関係のイベント
AJAX関係のイベント
新・コールバック関数の指定方法
新・コールバック関数の指定方法
9章 エフェクト・アニメーション
エフェクト .show() .hide(). toggle()
.show()、.hide()
.toggle()
フェード効果
.fadeIn()、.fadeOut()
.fadeToggle()
.fadeTo()
自作アニメ .animate()
.animate()
キューとは
キューとは
キューの取得・追加 .queue()
キューの取り出し&実行 .dequeue()
キューのクリア .clearQueue()
キュー処理の遅延 .delay()
アニメーションの停止
アニメーションの停止 .stop()
アニメーションの完了 .finish()
アニメーションを全体的に無効にする $.fx.off
アニメーションの処理が思いと感じたら
10章 プロパティ
.prop()の基本的な使い方
.prop()
属性とプロパティ
属性とプロパティ
checked、disabledな状態にする、状態を調べる
checked、disabledな状態にする、状態を調べる
.attr()で変更するやり方は、もう古い
.prop()とデフォルトの値
checked属性、checkedプロパティ、defaultCheckedプロパティ
デフォルト(初期)のチェックを付ける
disabled="disabled" の話
11章 .data()
.data()の基本的な使い方
.data()
.removeData()
HTML5のカスタム属性
HTML5のカスタム属性
.data()とHTML5のカスタム属性の関係
.data()とHTML5のカスタム属性の関係
注意点1、データは、最初の取得時に固定される
注意点2、値は変換できる型に変換される
その他注意点
12章 ユーティリィ(関数)
ユーティリティ(関数)とは
ユーティリティ(関数)とは
ユーティリティ関数の形式と範囲
ユーティリティ関数 $.each()、$.map()、$.grep()
$.each()
$.map()
eachとmapのコールバック関数の引数について
$.grep(array, function (value, index), invert)
$.merge(array1, array2)
$.extend( [deep], target, object1 [, objectN ] )
$.inArray(value, array [, fromIndex])
$.makeArray(obj)
$.parseJSON(json)
13章 プラグインの作り方
jQueryプラグインの作り方
jQueryオブジェクト・メソッドのプラグインの作り方
ユーティリティ関数の作り方
一般公開用のメソッドプラグインの作り方(お決まりと作法)
お決まりと作法
14章 その他
jQuery1.9以上への移行
jQuery Migrate
jQuery1.10、2.0の条件付き読み込み
主な廃止された機能
jQuery 1.8で「将来廃止予定(deprecated)」と位置づけられたもの
jQuery 1.9で削除されたもの(removed)
あとがき