このページの本文へ

40分で覚える!jQuery速習講座 (2/6)

2010年02月16日 11時00分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

【5分目:基礎編】
要素を指定するためのセレクター

 jQueryでは次のステップで処理を記述します。

jQueryの基本

 「操作が発生した要素」や「変更したい要素」を指定するのが「セレクター」です。

コード

 セレクターにはCSSのセレクターとほぼ同じものが利用できます。たとえば次のように記述すると、id属性が「main」の要素内に存在するimg要素を指定できます。

コード

 jQueryでは現在一般的に利用されているCSS2.1だけでなく、CSS3で定義されているセレクターや、jQuery独自のセレクター(フィルターと呼びます)も利用できます。最初のうちは使い慣れたCSSセレクターを利用し、jQueryに慣れてきたらさまざまなセレクターを使い分けるようにするとよいでしょう。


【参考:あとで覚える】
jQueryで利用できる主なセレクター

名称 書式 指定対象
CSSでよく利用されるセレクター
要素セレクター $(要素名) 特定のHTML要素
IDセレクター $(#ID名) 特定のid属性を持つ要素
クラスセレクター $(.クラス名) 特定のclass属性を持つ要素
子孫セレクター $(要素1 要素2) 特定の要素の内側にある要素
ユニバーサルセレクター $(*) すべての要素
グループセレクター $(セレクター1) セレクター2
CSS2のセレクター
子セレクター $(親要素名 > 子要素名) 特定の要素の直下の子要素
隣接セレクター $(要素1 + 要素2) 特定の要素の次の要素
first-child擬似クラス $(要素:first-child) 同一の親要素内の最初の要素
CSS3のセレクター
間接セレクター $(要素1 ~ 要素2) 特定の要素の後に出現する要素
否定擬似クラス $(要素1:not(要素2)) 特定の要素内で指定した要素以外の要素
empty擬似クラス $(要素:empty")" 子要素やテキストを含まない要素
nth-child擬似クラス $(要素:nth-child(番号)) 特定の要素内の指定した番号の要素
last-child擬似クラス $(要素:last-child) 特定の要素内の最後の要素
only-child擬似クラス $(要素:only-child) 指定した要素が1つだけ含まれる特定の要素
CSSの属性セレクター
[attribute] $([属性名]) 特定の属性を持つ要素
[attribute='value'] $([属性名='値']) 特定の属性が指定した値を持つ要素
[attribute!='value'] $(要素名[属性名!='値']) 特定の属性が指定した値を持たない要素
[attribute^='value'] $([属性名^='値']) 特定の属性が特定した値で始まっている要素
[attribute$='value'] $([属性名$='値']) 特定の属性が特定した値で終わっている要素
[attribute*='value'] $([属性名*='値']) 特定の属性が特定した値を含んでいる要素
[attributeFilter1][attributeFilter2] $([属性セレクター1][属性セレクター2]) 複数の属性セレクターに該当する要素
jQueryの独自フィルター
firstフィルター $(要素:first) 同一の親要素内の最初の要素
lastフィルター $(要素:last) 指定した要素の最後の要素
evenフィルター $(要素:even) 指定した要素の偶数番目の要素
oddフィルター $(要素:odd) 指定した要素の奇数番目の要素
eqフィルター $(要素:eq(番号)) 指定した番号の要素
gtフィルター $(要素:gt(番号)) 指定した番号より後の要素
ltフィルター $(要素:lt(番号)) 指定した番号より前の要素
headerフィルター $(要素:header) h1〜h6までのheader要素
containsフィルター $(要素:contains(文字列)) 特定の文字列が含まれている要素
hasフィルター $(要素1:has(要素2)) 特定の要素が含まれている要素
parentフィルター $(要素:parent) 子要素やテキストを含む要素
フォームフィルター
:inputフィルター $(要素:input) input要素/textarea要素/select要素/button要素
:textフィルター $(要素:text) 1行テキスト入力フォーム(type属性がtextのinput要素)
:passwordフィルター $(要素:password) パスワード入力フォーム(type属性がpassowordのinput要素)
:radioフィルター $(要素:radio) ラジオボタン(type属性がradioのinput要素)
:checkboxフィルター $(要素:checkbox) チェックボックス(type属性がcheckboxのinput要素)
:submitフィルター $(要素:submit) 送信ボタン(type属性がsubmit/imagesのinput要素)
:imageフィルター $(要素:image) イメージボタン(type属性がimageのinput要素)
:resetフィルター $(要素:reset) リセットボタン(type属性がresetのinput要素)
:buttonフィルター $(要素:button) ボタン(button要素)
:fileフィルター $(要素:file) ファイル選択フォーム(type属性がfileのinput要素)
:checkedフィルター $(要素:checked) ラジオボタン、チェックボックスでチェックが入っている要素
:selectedフィルター $(要素:selected) セレクトボックスで選択されている要素

■Amazon.co.jpで購入

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています