とほほのjQuery入門
トップ
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配列に要素を追加する
Copyright (C) 2013-2019 杜甫々
初版：2013年2月3日、最終更新：2019年5月5日
https://www.tohoho-web.com/js/jquery/index.htm