とほほのjQuery入門

目次

• 目次(ABC順)
• リンク
• コア
  • コア(基本)
• セレクタ
  • セレクタ(基本)
  • セレクタ(継承)
  • セレクタ(属性)
  • セレクタ(基本フィルタ)
  • セレクタ(コンテンツフィルタ)
  • セレクタ(ビジビリティフィルタ)
  • セレクタ(子要素フィルタ)
  • セレクタ(フォームフィルタ)
• トラバース
  • トラバース(親子関係)
  • トラバース(フィルタリング)
  • トラバース(その他)
• イベント
  • イベント(イベントハンドラ)
  • イベント(ブラウザイベント)
  • イベント(読み込み)
  • イベント(フォーム関連)
  • イベント(キーボード関連)
  • イベント(マウス関連)
  • イベント(イベントオブジェクト)
• 属性・値
  • 属性・属性値
  • HTML・テキスト・値
  • クラス
• スタイルシート
  • スタイルシート(基本)
• エフェクト
  • エフェクト(表示)
  • エフェクト(フェードイン)
  • エフェクト(スライドアップ)
  • エフェクト(カスタム)
• 操作
  • 操作(DOM挿入(内側))
  • 操作(DOM挿入(外側))
  • 操作(DOM挿入(囲み))
  • 操作(DOM置換)
  • 操作(DOM削除)
  • 操作(その他)
• Ajax
  • Ajax(ショートカット)
  • Ajax(低レベルインタフェース)
  • Ajax(イベントハンドラ)
  • Ajax(ヘルパー関数)
• コールバック
  • コールバック関数
• その他
  • その他(コレクション操作)
  • その他(DOM要素操作)
  • その他(データ)
• Deferredオブジェクト
• ユーティリティ
• インターナル

コア

コア(基本)

• $(...) ... jQueryの基本形
• jQuery.xxx ... jQueryの基本形
• $(selector) ... セレクタ
• $(html) ... HTML要素
• $(callback) ... ドキュメント読み込み完了時のコールバック
• $.sub() ... jQueryオブジェクトの複製(非推奨)
• $.holdReady() ... readyイベントの抑制(非推奨)
• $.noConflict() ... $ の代わりに jQuery を使用する
• $.ready ... ドキュメントの読み込み状態を監視する
• $.readyException() ... ドキュメントの読み込みエラー時のコールバック

セレクタ

セレクタ(基本)

• $("*") ... 全ての要素
• $("element") ... タグ名で指定した要素
• $(".class") ... クラスで指定した要素
• $("#id") ... IDで指定した要素
• $("selector1, selector2, selectorN") ... 条件の複数指定

セレクタ(継承)

• $("ancestor descendant") ... 子孫要素
• $("parent > child") ... 子要素
• $("prev + next") ... 兄弟要素(直後)
• $("prev ~ siblings") ... 兄弟要素(後続)

セレクタ(属性)

• [name] ... 指定した属性を持つ要素
• [name='value'] ... 属性の値がvalueである要素
• [name!='value'] ... 属性の値がvalue以外の要素
• [name~='value'] ... 属性の値がvalueを含む要素
• [name|='value'] ... 属性の値がvalue-で始まる要素
• [name^='value'] ... 属性の値がvalueで始まる要素
• [name$='value'] ... 属性の値がvalueで終わる要素
• [name*='value'] ... 属性の値がvalueを含む要素
• [...][...] ... 複数の属性にマッチする要素

セレクタ(基本フィルタ)

• :even ... 偶数番目の要素(非推奨)
• :odd ... 奇数番目の要素(非推奨)
• :first ... 最初の要素(非推奨)
• :last ... 最後の要素(非推奨)
• :eq() ... N番目の要素(非推奨)
• :gt() ... N番目以降の要素(非推奨)
• :lt() ... N番目以前の要素(非推奨)
• :not() ... 指定したセレクタにマッチしない要素
• :focus ... フォーカスが当たっている要素
• :header ... ヘッダ(h1, h2, h3, ...)要素
• :lang() ... lang="..." に該当する要素
• :root ... ルート要素(通常html要素)
• :target ... URLの #xxx にマッチする要素
• :animated ... アニメーション実行中の要素

セレクタ(コンテンツフィルタ)

• :contains() ... 指定したテキストを含む要素
• :empty ... 空の要素
• :has() ... 指定した要素を子要素として持つ要素
• :parent ... 親要素

セレクタ(ビジビリティフィルタ)

• :hidden ... 非表示の要素
• :visible ... 表示されている要素

セレクタ(子要素フィルタ)

• :first-child ... 最初の子要素
• :first-of-type ... 最初の同タグの子要素
• :last-child ... 最期の要素
• :last-of-type ... 最期の同タグの子要素
• :nth-child() ... N番目の子要素
• :nth-last-child() ... 最後からN番目の子要素
• :nth-of-type() ... N番目の同タグの子要素
• :nth-last-of-type() ... 最後からN番目の動タグの子要素
• :only-child ... 唯一の子要素
• :only-of-type ... 唯一の同タグの要素

セレクタ(フォームフィルタ)

• :input ... 入力部品要素
• :text ... type="text" の要素
• :password ... type="password" の要素
• :file ... type="file" の要素
• :checkbox ... type="checkbox" の要素
• :radio ... type="radio" の要素
• :submit ... type="submit" の要素
• :reset ... type="reset" の要素
• :button ... type="button" の要素
• :image ... type="image" の要素
• :checked ... checked された要素
• :disabled ... disabled された要素
• :enabled ... enabled された要素
• :selected ... 選択された option要素

トラバース

トラバース(親子関係)

• .parent() ... 親要素
• .parents() ... 祖先要素群
• .parentsUntil() ... セレクタにマッチするまでの祖先要素群
• .closest() ... セレクタにマッチするもっとも近い祖先要素
• .offsetParent() ... 最も近い relative, absolute, fixed 祖先要素
• .children() ... 子孫要素群
• .find() ... セレクタ等にマッチする子孫要素群
• .siblings() ... セレクタにマッチする兄弟要素群
• .prev() ... ひとつ前の兄弟要素
• .next() ... ひとつ後ろの兄弟要素
• .nextAll() ... 前方向の兄弟要素群
• .prevAll() ... 後方向の兄弟要素群
• .prevUntil() ... セレクタにマッチする、もっとも近い前方兄弟要素
• .nextUntil() ... セレクタにマッチする、もっとも近い後方兄弟要素

トラバース(フィルタリング)

• .filter() ... セレクタにマッチする要素群
• .first() ... 最初の要素
• .last() ... 最後の要素
• .eq() ... N番目の要素
• .slice() ... N番目からM番目までの要素群
• .has() ... セレクタにマッチする要素を子要素として持つ要素
• .not() ... セレクタにマッチしない要素

トラバース(その他)

• .is() ... セレクタにマッチする要素が存在するか否か
• .map() ... 各要素に対して関数を実行
• .contents() ... テキストやコメントも含めた子要素群
• .add() ... セレクタにマッチした要素を加える
• .end() ... next()やfind()などの操作を行う前の要素
• .addBack() ... next()やfind()などの操作を行う前の要素と行った後の要素の集合
• .andSelf() ... next()やfind()などの操作を行う前の要素と行った後の要素の集合(非推奨)

イベント

イベント(イベントハンドラ)

• .bind() ... イベントハンドラを割り当てる(非推奨)
• .unbind() ... イベントハンドラを取り除く(非推奨)
• .live() ... 後から追加された要素も監視してハンドラを指定する(非推奨)
• .die() ... live()で追加されたハンドラを削除(非推奨)
• .delegate() ... live()の効率をあげるための絞り込み(非推奨)
• .undelegate() ... 絞り込みの解除(非推奨)
• .on() ... 後から追加された要素も監視してハンドラを指定する
• .off() ... on()によるイベントハンドラを解除する
• .one() ... 一度だけイベントハンドラを呼び出す
• .trigger() ... 要素に対してイベントを擬似的に発行させる
• .triggerHandler() ... 要素に対してイベントを擬似的に発行させる

イベント(ブラウザイベント)

• .error() ... 読み込みエラーが発生した時(非推奨)
• .resize() ... ウィンドウがリサイズされた時
• .scroll() ... ウィンドウがスクロールされた時

イベント(読み込み)

• .ready() ... HTMLファイルの読み込みが完了した時
• .load() ... 画像なども含めた読み込みが完了した時(非推奨)
• .unload() ... ページがアンロードされる時(非推奨)

イベント(フォーム関連)

• .focus() ... フォーカスがあたった時
• .blur() ... フォーカスがはずれた時
• .change() ... 値が変更された時
• .select() ... 選択された時
• .submit() ... サブミットされた時

イベント(キーボード関連)

• .focusin() ... フォーカスがあてられた時
• .focusout() ... フォーカスがはずれた時
• .keydown() ... キーが押された時(最初に押された時のみ発生)
• .keyup() ... キーが離された時
• .keypress() ... キーが押された時(押されている間継続的に発生)

イベント(マウス関連)

• .click() ... クリックされた時
• .dblclick() ... ダブルクリックされた時
• .contextmenu() ... 右クリックされた時
• .hover() ... マウスが乗せられた時
• .mouseenter() ... マウスが入ってきた時
• .mouseleave() ... マウスが離れた時
• .mouseover() ... マウスが乗せられた時
• .mouseout() ... マウスが離れた時
• .mouseup() ... マウスボタンが離された時
• .mousedown() ... マウスボタンが押された時
• .mousemove() ... マウスが動かされた時
• .toggle() ... (廃止)

イベント(イベントオブジェクト)

• event.type ... イベントタイプ
• event.target ... イベントが発生した要素
• event.currentTarget ... 現在のターゲット要素(this)
• event.relatedTarget ... 移動元、移動先などの関連要素
• event.delegateTarget ... 委任を行った要素
• event.data ... イベントで指定されたデータ
• event.pageX ... イベントが発生したX座標
• event.pageY ... イベントが発生したY座標
• event.which ... キーコードやマウスボタン番号
• event.result ... 他のイベントハンドラから返却された値
• event.metaKey ... メタキーが押されていたか否か
• event.namespace ... イベントのネームスペース
• event.timeStamp ... イベントが発生した日時
• event.preventDefault() ... リンクジャンプなどのデフォルト動作を抑制する
• event.isDefaultPrevented() ... デフォルト動作が抑制されているか否か
• event.stopPropagation() ... 親要素へのイベントの伝搬を抑制する
• event.isPropagationStopped() ... イベント伝搬が抑制されているか否か
• event.stopImmediatePropagation() ... 他のイベントハンドラへの伝搬を抑制する
• event.isImmediatePropagationStopped() ... 他のハンドラへの伝搬が抑制されているか否か

属性・値

属性・属性値

• .attr() ... 属性値を参照・設定する
• .removeAttr() ... 属性を削除する
• .prop() ... プロパティを参照・設定する
• .removeProp() ... プロパティを削除する

HTML・テキスト・値

• .html() ... HTMLを参照・設定する
• .text() ... テキストを参照・設定する
• .val() ... 入力フォームなどの値を参照・設定する

クラス

• .addClass() ... クラスを追加する
• .removeClass() ... クラスを削除する
• .hasClass() ... クラスを持っているか確認する
• .toggleClass() ... クラスの追加・削除をトグルする

スタイルシート

スタイルシート(基本)

• .css() ... CSSを参照・設定する
• .height() ... 高さを参照・設定する
• .width() ... 幅を参照・設定する
• .innerHeight() ... 内枠の高さを参照・設定する
• .innerWidth() ... 内枠の幅を参照・設定する
• .outerHeight() ... 外枠の高さを参照・設定する
• .outerWidth() ... 外枠の幅を参照・設定する
• .offset() ... 画面上の縦位置・横位置を参照・設定する
• .position() ... 親要素からの相対位置を参照する
• .scrollLeft() ... 左右方向にスクロールする
• .scrollTop() ... 上下方向にスクロールする
• $.cssHooks ... 新しいCSSプロパティを擬似的に定義する
• $.cssNumber ... 単位無しのCSSプロパティの集合
• $.escapeSelector() ... セレクタのメタ文字を無効化する

エフェクト

エフェクト(表示)

• .show() ... 要素を表示する
• .hide() ... 要素を非表示にする
• .toggle() ... 要素の表示・非表示を切り替える

エフェクト(フェードイン)

• .fadeIn() ... フェードインする
• .fadeOut() ... フェードアウトする
• .fadeTo() ... フェードイン・アウトを制御する
• .fadeToggle() ... フェードイン・アウトを切り替える

エフェクト(スライドアップ)

• .slideUp() ... スライドアップする
• .slideDown() ... スライドダウンする
• .slideToggle() ... スライドアップ・ダウンを切り替える

エフェクト(カスタム)

• .animate() ... アニメーションを行う
• $.fx.interval ... アニメーションのフレーム間隔を指定する(非推奨)
• $.fx.off ... アニメーションを中止する
• .queue() ... アニメーションキューを参照・設定する
• $.queue() ... アニメーションキューを参照・設定する
• .dequeue() ... アニメーションキューを削除する
• $.dequeue() ... アニメーションキューを削除する
• .delay() ... アニメーションキューにディレイ(遅延)を設定する
• .stop() ... アニメーションを中止する
• .clearQueue() ... アニメーションキューをクリアする
• .finish() ... アニメーションを停止・クリア・完了させる
• $.speed() ... アニメーションの設定を行う

操作

操作(DOM挿入(内側))

• .prepend() ... 要素の内側の先頭にコンテンツを挿入する
• .append() ... 要素の内側の最後にコンテンツを挿入する
• .prependTo() ... コンテンツを要素の内側の先頭に挿入する
• .appendTo() ... コンテンツを要素の内側の最後に挿入する

操作(DOM挿入(外側))

• .before() ... 要素の直前にコンテンツを挿入する
• .after() ... 要素の直後にコンテンツを挿入する
• .insertBefore() ... コンテンツを要素の直前に挿入する
• .insertAfter() ... コンテンツを要素の直後に挿入する

操作(DOM挿入(囲み))

• .wrap() ... 要素をコンテンツで囲む
• .wrapAll() ... 要素をまとめてコンテンツで囲む
• .wrapInner() ... 要素でコンテンツを囲む

操作(DOM置換)

• .replaceAll() ... コンテンツで要素を置換する
• .replaceWith() ... 要素をコンテンツで置換する

操作(DOM削除)

• .remove() ... 要素群の中からセレクタにマッチするものを削除する(完全削除)
• .detach() ... 要素群の中からセレクタにマッチするものを削除する(退避削除)
• .empty() ... 子要素をすべて削除する
• .unwrap() ... 親要素を削除する

操作(その他)

• .clone() ... 要素群をコピー(複製)する
• $.htmlPrefilter() ... HTML挿入時のフィルタ関数を設定する

Ajax

Ajax(ショートカット)

• .load() ... コンテンツをロードして埋め込む
• $.get() ... HTTPのGETメソッドを呼び出す
• $.post() ... HTTPのPOSTメソッドを呼び出す
• $.getJSON() ... HTTPのGETでJSONを読みこむ
• $.getScript() ... JavaScriptファイルを読み込んで実行する

Ajax(低レベルインタフェース)

• $.ajax() ... Ajaxを呼び出す
• $.ajaxSetup() ... Ajaxのオプションを設定する
• $.ajaxPrefilter() ... Ajax呼び出し時のプレフィルタ関数を設定する
• $.ajaxTransport() ... Ajaxの送信関数を高速版等に置き換える

Ajax(イベントハンドラ)

• .ajaxStart() ... Ajax開始時のコールバックを指定する
• .ajaxSend() ... Ajax送信時のコールバックを指定する
• .ajaxSuccess() ... Ajax成功時のコールバックを指定する
• .ajaxError() ... Ajaxエラー時のコールバックを指定する
• .ajaxComplete() ... Ajax完了時のコールバックを指定する
• .ajaxStop() ... Ajax中止時のコールバックを指定する

Ajax(ヘルパー関数)

• .serialize() ... フォームデータを文字列にシリアライズする
• .serializeArray() ... フォームデータを連想配列で取得する
• $.param() ... オブジェクトをシリアライズ化する

コールバック

コールバック関数

• $.Callbacks() ... コールバックオブジェクトを生成する
• callbacks.add() ... コールバックオブジェクトにコールバック関数を追加する
• callbacks.remove() ... コールバックオブジェクトからコールバック関数を削除する
• callbacks.empty() ... コールバックオブジェクトを空にする
• callbacks.has() ... コールバックオブジェクトにコールバック関数が登録されているか否かを調べる
• callbacks.fire() ... コールバックオブジェクトのコールバック関数を呼び出す
• callbacks.fireWith() .. thisを指定してコールバック関数を呼び出す
• callbacks.fired() ... コールバック関数が呼び出されたか否かを調べる
• callbacks.disable() ... コールバックオブジェクトを無効化する
• callbacks.disabled() ... コールバックオブジェクトの無効化状態を調べる
• callbacks.lock() ... コールバックオブジェクトをロックする
• callbacks.locked() ... ロールバックオブジェクトがロックされているか調べる

その他

その他(コレクション操作)

• .each() ... 要素群に対して関数を実行する

その他(DOM要素操作)

• .size() .. 要素数を返す(非推奨)
• .get() ... jQuery要素群をJavaScript要素群に変換する
• .toArray() ... jQuery要素群をJavaScript配列に変換する
• .index() ... 要素群中でセレクタにマッチする要素のインデックスを返す

その他(データ)

• .data() ... オブジェクトにkey=valueのデータを設定する
• .removeData() ... データを削除する
• $.removeData() ... データを削除する
• $.hasData() ... データを持っているか否かを調べる

Deferredオブジェクト

• $.Deferred() ... Deferredオブジェクトを生成する
• deferred.resolve() ... Deferredオブジェクトを解決状態にする
• deferred.resolveWith() ... Deferredオブジェクトを解決状態にする
• deferred.reject() ... Deferredオブジェクトを棄却状態にする
• deferred.rejectWith() ... Deferredオブジェクトを棄却状態にする
• deferred.notify() ... Deferredオブジェクトの状態を通知する
• deferred.notifyWith() ... Deferredオブジェクトの状態を通知する
• deferred.done() ... 解決状態になった時のコールバック関数を設定する
• deferred.fail() ... 棄却状態になった時のコールバック関数を設定する
• deferred.progress() ... 未解決中のコールバック関数を設定する
• deferred.always() ... 解決または棄却状態になった時のコールバック関数を設定する
• deferred.then() ... 解決・棄却・未解決中のコールバック関数をまとめて設定する
• deferred.catch() ... 棄却状態や例外をキャッチするコールバック関数を設定する
• deferred.isResolved() ... 解決したか否かを調べる(非推奨)
• deferred.isRejected() ... 棄却されたか否かを調べる(非推奨)
• deferred.state() ... Deferredオブジェクトの状態を調べる
• deferred.promise() ... Promiseオブジェクトを参照する
• .promise() ... Promiseオブジェクトを生成する
• deferred.pipe() ... (廃止)
• $.when() ... すべてのオブジェクトが解決した際のコールバック関数を設定する

ユーティリティ

• $.boxModel ... CSSボックスモデルのサポート可否を得る(非推奨)
• $.browser ... ブラウザ情報を得る(非推奨)
• $.support ... ブラウザのサポート状況を判断する(非推奨)
• $.data() ... 要素にkey=valueデータを設定する
• $.trim() ... 文字列をトリム(前後の空白削除)する(非推奨)
• $.parseJSON() ... JSONを解釈する(非推奨)
• $.parseXML() ... XMLを解釈する
• $.parseHTML() ... HTMLを解釈する
• $.each() ... 配列を処理する
• $.grep() ... 条件にマッチするものを抜き出す
• $.unique() ... 重複した要素を除外する(非推奨)
• $.uniqueSort() ... 重複した要素を除外する
• $.makeArray() ... jQuery要素をJavaScript要素に変換する
• $.map() ... 要素配列の個々を変換する
• $.merge() ... 要素配列をマージする
• $.extend() ... 要素配列をマージする
• $.globalEval() ... JavaScriptを実行する
• $.type() ... 変数の型を調べる(非推奨)
• $.contains() ... 要素が内包されているかを調べる
• $.inArray() ... 配列の中で最初に見つかった位置を調べる
• $.isArray() ... 値が配列か否かを調べる(非推奨)
• $.isEmptyObject() ... 値が空か否かを調べる
• $.isFunction() ... 値が関数か否かを調べる(非推奨)
• $.isNumeric() ... 値が数値か否かを調べる(非推奨)
• $.isPlainObject() ... 値がプレインオブジェクトか否かを調べる
• $.isWindow() ... 値がウィンドウか否かを調べる(非推奨)
• $.isXMLDoc() ... 値がXMLドキュメントか否かを調べる
• $.noop() ... 何もしない
• $.proxy() ... 引数をthisとして参照可能な関数を呼び出す(非推奨)
• $.now() ... 現在の時刻を1970年1月1日からの秒数で得る(非推奨)

インターナル

• .jquery ... jQueryのバージョンを得る
• .context ... 現在のコンテキストを得る(非推奨)
• .selector ... 現在のセレクタを得る(非推奨)
• .length ... オブジェクトの個数を得る
• $.error() ... 開発者機能
• .pushStack() ... jQuery配列に要素を追加する