jQuery初心者のための入門講座 2/4 (セレクタ編)!

2014/04/17

こんにちは。
jQuery初心者のための入門講座を「準備編」と「セレクタ編」と「メッソッド編」「イベント編」というように4回に分けて書きたいと思います。
今回はセレクタ編です。

jQuery初心者のための入門講座 2/4 (セレクタ編)!

jQueryの基本的な書き方

セレクタとはどの要素を処理するか指定する方法です。
メソッドとは処理する内容(命令)です。

下記のコードが基本的な形になります。

※jQueryのコードの書く場所等がわからない方は準備編で説明していますので、先に準備編をお読み下さい。

セレクタを覚えよう!

まずはセレクタを覚えましょう。

要素セレクタ

特定のHTML要素を指定する時に使います。

IDセレクタ

特定のID属性を指定する時に使います。
CSSと同じように#を付けます。

クラスセレクタ

特定のクラス属性を指定する時に使います。
CSSと同じように.を付けます。

 

子孫セレクタ

それ以下の要素を指定する時に使います。
CSSと同じようにスペースで区切ります。

 

グループセレクタ

複数の要素を指定する時に使います。
CSSと同じように,で区切ります。

 

子セレクタ

特定の要素の直下の要素を指定する時に使います。
CSSと同じように>で区切ります。

 

隣接セレクタ

特定の要素の次の要素を指定する時に使います。
CSSと同じように+を付けます。

 

フィルタ

jQueryでは便利な独自なフィルタが用意されています。

evenフィルタ

偶数番目の要素を指定する時に使います。
:evenを付けます。

 

oddフィルタ

奇数番目の要素を指定する時に使います。
:oddを付けます。

 

eqフィルタ

特定の番号の要素を指定する時に使います。
:eq(特定の番号)を付けます。

 

gtフィルタ

特定の番号の要素より大きい要素をまとめて指定する時に使います。
:gt(特定の番号)を付けます。

 

ltフィルタ

特定の番号の要素より小さい要素をまとめて指定する時に使います。
:lt(特定の番号)を付けます。

 

containsフィルタ

特定の文字が含まれている要素を指定する時に使います。
:contains(特定の文字)を付けます。

 

firstフィルタ

特定の要素の最初の要素を指定する時に使います。
:firstを付けます。

 

lastフィルタ

特定の要素の最後の要素を指定する時に使います。
:lastを付けます。

 

属性セレクタ

要素の属性でセレクタを指定します。

[attribute]

特定の属性を持つ要素を指定する時に使います。
[属性値]を書きます。

 

[attribute=’value’]

特定の属性が特定の値を持つ要素を指定する時に使います。
[属性値=’値’]を書きます。

 

[attribute!=’value’]

特定の属性が特定の値以外をもつ要素を指定する時に使います。
[属性値!=’値’]を書きます。

 

[attribute*=’value’]

特定の属性が特定の文字が含まれている要素を指定する時に使います。
[属性値*=’文字’]を書きます。

 

[attribute^=’value’]

特定の属性が特定の文字で始まっている要素を指定する時に使います。
[属性値^=’文字’]を書きます。

 

[attribute$=’value’]

特定の属性が特定の文字で終わっている要素を指定する時に使います。
[属性値$=’文字’]を書きます。

 

jQuery レッスンブック jQuery2.X/1.X対応
jQuery レッスンブック jQuery2.X/1.X対応

 

以上でjQuery初心者のための入門講座(セレクタ編)でした。

topへ戻る