デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

Events:イベント

マウスイベント

マウス操作に関連したイベント時の処理を設定します。マウスが要素に入ったり出たりするイベントは子孫要素もイベントを受るか否かで2系統あります(mouseoverとmouseenter、mouseoutとmouseleave)。混乱しがちなので気を付けましょう。

.click( )

クリック時の処理を設定します。
→詳細

.dblclick( )

ダブルクリック時の処理を設定します。
→詳細

.mousedown( )

マウスボタンを押した時の処理を設定します。
→詳細

.mouseup( )

マウスボタンを離した時の処理を設定します。
→詳細

.mouseover( )

マウスカーソルが要素内(子孫要素を含む)に入った時の処理を設定します。
→詳細

.mouseout( )

マウスカーソルが要素内(子孫要素を含む)から出た時の処理を設定します。
→詳細

.mouseenter( )

マウスカーソルが要素内(子孫要素は除く)に入った時の処理を設定します。
→詳細

.mouseleave( )

マウスカーソルが要素内(子孫要素は除く)から出た時の処理を設定します。
→詳細

.mousemove( )

要素内でマウスカーソルが移動した時の処理を設定します。
→詳細

.hover( )

マウスカーソルが要素内に入ったり出たときの時の処理を設定します。
→詳細

.toggle( )

クリックのたびに異なる処理を実行します。現在では廃止され利用できません。
→詳細

キーイベント

キー入力に関連したイベント時の処理を設定します。

.keydown( )

キーを押した時の処理を設定します。
→詳細

.keypress( )

キー入力があった時の処理を設定します。
→詳細

.keyup( )

キーを離した時の処理を設定します。
→詳細

.focusin( )

フォーカス(子孫要素を含む)された時の処理を設定します。
→詳細

.focusout( )

フォーカス(子孫要素を含む)が外れた時の処理を設定します。
→詳細

フォームイベント

フォームに関連したイベント時の処理を設定します。

.focus( )

フォーカス(子孫要素は除く)された時の処理を設定します。
→詳細

.blur( )

フォーカス(子孫要素は除く)が外れた時の処理を設定します。
→詳細

.change( )

内容が変更された時の処理を設定します。
→詳細

.select( )

文字が選択された時の処理を設定します。
→詳細

.submit( )

データ送信時の処理を設定します。
→詳細

ブラウザイベント

ブラウザに関連したイベント時の処理を設定します。

.resize( )

リサイズした時の処理を設定します。
→詳細

.scroll( )

スクロールした時の処理を設定します。
→詳細

.error( )

エラーが発生した時の処理を設定します。
→詳細

ロードイベント

読込に関連したイベント時の処理を設定します。

.load( )

読込が完了した時の処理を設定します。
→詳細

.unload( )

ページから離れる時の処理を設定します。
→詳細

.ready( )

DOMの読込を完了した時の処理を設定します。
→詳細

イベントハンドラアタッチメント

イベントハンドラアタッチメントとはイベントが発生した時に実行するハンドラ(function)をアタッチ(付加)するメソッドです。つまり指定した要素に、イベントが発生した時に実行するfunctionを設定するメソッドです。

イベントの設定は本来、この「イベントハンドラアタッチメント」を利用して設定します。上記(マウスイベント〜ロードイベント)で紹介しているものは、イベントハンドラアタッチメントを簡略化して利用できるようにしたもので、動的な要素には対応していません。
※左メニューでは文字が入りきらないので「イベントハンドラアタッチ」と省略してあります。

.bind( )

jQueryで最初に登場したイベントハンドラアタッチメントです。動的な要素(プログラムで後から追加された要素)に対してイベントの設定できないため、v1.3で「live」が登場しました。
→詳細

.unbind( )

bindで設定されたイベント発生時の処理を解除します。
→詳細

.live( )

動的な要素(プログラムで後から追加された要素)に対してイベントを設定できるように改良されたイベントハンドラアタッチメントです。処理負荷が高いためv1.9で廃止になりました。
→詳細

.die( )

liveで設定されたイベント発生時の処理を解除します。v1.9で廃止になりました。
→詳細

.delegate( )

イベントの調査範囲を限定することで、処理負荷を軽減するように改良されたイベントハンドラアタッチメントです。v1.7で「on」に取って代わられます。
→詳細

.undelegate( )

delegateで設定されたイベント発生時の処理を解除します。
→詳細

.on( )

イベントハンドラアタッチメントの最終形です。これさえ覚えておけば、bind,live,delegateは覚えなくて良いです。
→詳細

.off( )

onで設定されたイベント発生時の処理を解除します。これさえ覚えておけば、unbind,die,undelegateは覚えなくて良いです。
→詳細

.one( )

1回だけ利用できるイベント発生時の処理を設定します。構文はonと同じです。
→詳細

.triggerHandler( )

指定された要素のイベント発生時の処理(function)だけを実行します。ブラウザ標準の機能は実行されません。
→詳細

.trigger( )

指定された要素のイベント処理をします。ブラウザ標準の機能も実行されます。
→詳細

イベントオブジェクト

イベントハンドラに必ず渡されるobjectオブジェクトのことです。イベントの発生ごとに作成され、プロパティの他にメソッドも設定されています(構文にある「eo」はevent objectの略です)。

jQuery.Event( )

イベントオブジェクトを作成します。 →詳細

eo.type

発生したイベントの種類を取得します。 →詳細

eo.data

イベントハンドラに渡された情報を取得します。 →詳細

eo.pageX

イベントが発生したX座標(ブラウザの座標系)を取得します。 →詳細

eo.pageY

イベントが発生したY座標(ブラウザの座標系)を取得します。 →詳細

eo.timeStamp

イベントが発生した時間(1970.1/1からのミリ秒)を取得します。 →詳細

eo.which

正規化されたキーコードを取得します。 →詳細

eo.result

直前に実行したイベントハンドラが返した値を取得します。 →詳細

eo.namespace

名前空間に設定された名称を取得します。 →詳細

eo.target

イベントが発生したDOM要素を取得します。 →詳細

eo.currentTarget

現在のDOM要素を取得します。 →詳細

eo.delegateTarget

デリゲート時の調査範囲のDOM要素を取得します。 →詳細

eo.relatedTarget

イベントの発生に関連したDOM要素を取得します。 →詳細

eo.stopPropagation( )

バブリング(親要素方向へのイベントの伝播)を停止します。 →詳細

eo.stopImmediatePropagation( )

バブリングとイベントハンドラの実行を停止します。 →詳細

eo.preventDefault( )

ブラウザ標準の機能(a要素のリンクなど)を停止します。 →詳細

eo.isPropagationStopped( )

stopPropagationメソッドが実行されたかを調査します。 →詳細

eo.isImmediatePropagationStopped( )

stopImmediatePropagationメソッドが実行されたかを調査します。 →詳細

eo.isDefaultPrevented( )

preventDefaultメソッドが実行されたかを調査します。 →詳細