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

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

Selectors:セレクタ

サンプルについての注意点
サンプルではセレクタが確認しやすいように、可能な限り紹介しているセレクタのみを利用しています。しかし実際は複数のセレクタを組みあわせて調査範囲を絞るようにした方が良いパフォーマンスを得られます
body内全体を調べるよりも、特定の範囲内(例えばid属性がtestのdiv内)の〜を選択とした方が調べる範囲が狭く高速に処理できるからです。

基礎

基礎となるセレクタです。

*(すべて)

全ての要素を選択します。単独で利用するのではなく、他のセレクタと組みあわせて特定範囲内の全てを選択するときなどに利用します。
→詳細

element(html要素)

htmlの要素を選択します。
→詳細

#id名(ID属性)

任意のid属性を持つ要素を選択します。
→詳細

.class名(clas属性)

任意のclass属性を持つ要素を選択します。
→詳細

複数のセレクタ(and)

複数のセレクタ(主にhtml要素+id属性 or class属性)を記述し、その全てにマッチする要素を選択します。
→詳細

複数のセレクタ(or)

複数のセレクタを記述し、そのいずれかにマッチする要素をすべて選択します。
→詳細

階層関連

階層や前後関係に関連するセレクタです。

先祖 子孫

親要素内にある任意の要素を選択します。以下の「> 子要素」とは異なり、直下の要素である必要はありません。
→詳細

>(子要素)

親要素内にある任意の要素を選択します。上記の「先祖 子孫」とは異なり、直下の要素のみを選択します。
調査範囲が狭い分「> 子要素」より高速です。
→詳細

+(直近の後要素)

前要素にある「直後」の要素を1つだけ選択します。複数選択したい場合は以下の「~(後要素)」を利用します。
→詳細

~(後要素)

前要素の後ろにある全ての要素を選択します。
→詳細

属性

属性によって要素を選択するセレクタです。

[属性名]

任意の属性をもつ要素を選択します。
→詳細

[属性名='値']

任意の属性が指定した「値を持つ」要素を選択します。
→詳細

[属性名!='値']

任意の属性が指定した値「以外」の値を持つ要素を選択します。
→詳細

[属性名^='値']

任意の属性が指定した値から「始まる」要素を選択します。
→詳細

[属性名$='値']

任意の属性が指定した値で「終わる」要素を選択します。
→詳細

[属性名*='値']

任意の属性が指定した値を「含む」要素を選択します。
→詳細

[属性名-='値']

任意の属性が指定した値を「単語として持つ」要素を選択します。
→詳細

[属性名|='値']

任意の属性が指定した値と「一致またはハイフンを付け派生した」要素を選択します。
→詳細

複数の属性

複数の属性セレクタ記述し、その全てにマッチする要素を選択します。
→詳細

フィルタとは
:(コロン)から始まるセレクタ。
単独でも利用できますが、他のセレクタと組合わせて利用し選択対象を絞ります。

基本フィルタ

基本となるフィルタです。比較的よく利用されます。

:root

最上位の要素(つまりhtml)を選択します。
→詳細

:header

見出し要素を選択します。
→詳細

:lang()

引数で指定したlang属性の要素を選択します。
→詳細

:target

リンク先の要素を選択します。
→詳細

:animated

アニメしている要素を選択します。
→詳細

:first

最初の要素を選択します。
→詳細

:last

最後の要素を選択します。
→詳細

:even

偶数番目の要素を選択します。
→詳細

:odd

奇数番目の要素を選択します。
→詳細

:eq( )

引数で指定したインデックス番号の要素を選択します。
→詳細

:gt()

引数で指定したインデックス番号より大きい要素を選択します。
→詳細

:lt( )

引数で指定したインデックス番号より小さい要素を選択します。
→詳細

:not( )

引数で指定した「セレクタ」以外の要素を選択します。
→詳細

子要素フィルタ

子要素ごとに効力を発揮するセレクタです。

:first-child

最初の子要素を選択します。セレクタで指定した要素が最初でない場合は選択されません。
→詳細

:first-of-type

セレクタで指定された最初の子要素を選択します。:first-childと異なり、指定したセレクタが最初の子要素である必要はありません。
→詳細

:last-child

最後の子要素を選択します。セレクタで指定した要素が最後でない場合は選択されません。
→詳細

:last-of-type

セレクタで指定された最後の子要素を選択します。:last-childと異なり、指定したセレクタが最後の子要素である必要はありません。
→詳細

:only-child

子要素が1つしかないときに、その子要素を選択します。
→詳細

:only-of-type

セレクタで指定された子要素が単独の場合に選択します。:only-childと異なり、指定したセレクタが単独であれば他に要素があっても構いません。
→詳細

:nth-child( )

引数を設定することで親要素内の様々な要素を選択することができます。引数にはインデックス番号の他、even/oddや数式が利用できます。
→詳細

:nth-of-type( )

セレクタと引数で指定した子要素を選択します。引数にはインデックス番号の他、even/oddや数式が利用できます。nth-childと異なりセレクタで指定した要素しかカウントしません。
→詳細

:nth-last-child( )

「後から数えた」引数を設定することで親要素内の様々な要素を選択することができます。引数にはインデックス番号の他、even/oddや数式が利用できます。
→詳細

:nth-last-of-type( )

セレクタと「後から数えた」引数で指定した子要素を選択します。引数にはインデックス番号の他、even/oddや数式が利用できます。nth-last-childと異なりセレクタで指定した要素しかカウントしません。
→詳細

可視性フィルタ

見えている/隠れているを選別するセレクタです。

:hidden

cssの設定で表示されていない(display:noneやwidth:0px等)要素やフォームのhidden要素を選択します。
→詳細

:visible

表示されている要素を選択します。
→詳細

コンテンツフィルタ

要素の内容に関するセレクタです。divタグなら開始タグから終了タグの間が要素の内容になります。

:contains( )

引数で指定した文字列を含む要素を選択します。
→詳細

:has( )

引数で指定した子要素を持つ要素を選択します。
→詳細

:empty

何も持っていない要素を選択します。
→詳細

:parent

子要素またはテキストを持っている要素を選択します。
名称からは想像しにくいのですが上記の:emptyとは逆の機能を持ったセレクタです。
→詳細

フォーム

フォームに関するセレクタです。

:checked

チェックされた要素(チェックボックス/ラジオボタン)を選択します。
→詳細

:selected

セレクト要素で選択されている要素を選択します。
→詳細

:disabled

無効になっているフォームの要素を選択します。
→詳細

:enabled

有効になっているフォームの要素を選択します。
→詳細

:focus

フォーカスされている要素を選択します。
→詳細

:button

ボタン(button要素、typeがbuttonのinput要素)を選択します。
→詳細

:checkbox

チェックボックス(type属性がcheckboxの要素)を選択します。
→詳細

:file

ファイル選択ボタン(type属性がfileである要素)を選択します。
→詳細

:image

画像を利用したフォームボタン(type属性がimageの要素)を選択します。
→詳細

:input

input要素を選択します。
→詳細

:password

type属性がpasswordの要素を選択します。
→詳細

:radio

ラジオボタン(type属性がradioの要素)を選択します。
→詳細

:reset

リセットボタン(type属性がresetの要素)を選択します。
→詳細

:submit

送信ボタン(type属性がsubmitの要素)を選択します。
type属性を設定していないbutton要素も、初期設定値がsubmitのため選択されます。
→詳細

:text

type属性がtextの要素を選択します。
→詳細