@ PHP

selector:セレクタ

jQuery を利用したスクリプトでは、対象とする HTML の要素をセレクタで指定し、ドットシンタックスを使って jQuery のメソッドを記述します。

CSS のセレクタと同様に、要素セレクタ、id セレクタ、クラスセレクタなで指定可能です。その他にも、より柔軟な要素指定が可能な jQuery 独自セレクタも用意されています。

jQuery で使えるおもなセレクタを以下にまとめておきます。

基本セレクター
ユニバーサルセレクター $(“*”) すべての要素を選択
クラスセレクター $(“.class”) 指定したクラスを選択
要素セレクター $(“要素”) 指定した要素を選択
IDセレクター $(“#id”) 指定したidを選択
グループセレクター $(セレクター1, …, セレクターn”) 指定した複数のセレクターを選択
階層
子孫セレクター $(“ancestor descendant”) 先祖要素(ancestor)の内側の指定された子孫要素(descendant)を選択
子セレクター $(“parent > child”) 親要素(parent)の直下の指定された子要素(child)を選択
隣接セレクター $(“prev + next”) 指定した要素(prev)の次にある指定した要素(next)を選択
関節セレクター (“prev ~ siblings”) 定した要素(prev)の後に続く指定した要素(sliblings)を選択
子要素フィルター
first-child $(“要素:first-child”) 指定した要素がはじめの子要素の場合、その要素を選択
first-of-type $(“要素:first-of-type”) 指定した要素のはじめの子要素を選択
last-child $(“要素:last-child”) 指定した要素が最後の子要素の場合、その要素を選択
last-of-type $(“要素:last-of-type”) 指定した要素の最後の子要素を選択
nth-child $(“要素:nth-child(n)”) 指定した要素のn番目を選択
nth-last-child $(“要素:nth-last-child(n)”) 指定した要素の最後から数えてn番目を選択
nth-of-type $(“要素:nth-of-type(n)”) 指定した要素のn番目を選択
nth-last-of-type $(“要素:nth-last-of-type(n)”) 指定した要素の最後から数えてn番目を選択
only-child $(“要素:only-child”) 指定した要素がひとつしかない子要素の場合、その要素を選択
only-of-type $(“要素:only-of-type”) 指定した要素がひとつしかない子要素のタイプの場合、その要素を選択
属性セレクター
[attribute] $(“[属性名]”) 指定した属性名(attribute)の要素を選択
[attribute=’value’] $(“[属性名=’値’]”) 指定した属性名(attribute)と値(value)の文字列が全く同じ場合に要素を選択
[attribute!=’value’] $(“[属性名!=’値’]”) 指定した属性名(attribute)と値(value)の文字列が異なる場合に要素を選択
[attribute*=’value’] $(“[属性名*=’値’]”) 指定した属性名(attribute)が値(value)の文字列を含んでいる要素を選択
[attribute|=’value’] $(“[属性名|=’値’]”) 指定した属性名(attribute)が値(value)の文字列と同じ場合、もしくは値の文字列からはじまり後ろにハイフン(-)が続いてる場合に要素を選択
[attribute$=’value’] $(“[属性名$=’値’]”) 指定した属性名(attribute)が値(value)の文字列と同じ場合、もしくは値の文字列と属性名の最後の部分が同じ場合に場合に要素を選択
[attribute~=’value’] $(“[属性名~=’値’]”) 指定した属性名(attribute)が値(value)の文字列と同じ場合、もしくは値の文字列を半角スペースで区切られて含む場合に要素を選択
[attribute^=’value’] $(“[属性名^=’値’]”) 指定した属性名(attribute)が値(value)の文字列からはじまる場合に要素を選択
フォームフィルター
:button $(“要素:button”) button要素を選択
:checkbox $(“要素:checkbox”) type属性がcheckboxのinput要素を選択
:checked $(“要素:checked”) チェックボックスやラジオボタンのチェックが入っている要素を選択
:disabled $(“要素:disabled”) disabledな要素を選択
:enabled $(“要素:enabled”) enabledな要素を選択
:file $(“要素:file”) type属性がfileのinput要素を選択
:image $(“要素:image”) type属性がimageのinput要素を選択
:input $(“要素:input”) input、textarea、select、button要素を選択
:password $(“要素:password”) type属性がpasswordのinput要素を選択
:radio $(“要素:radio”) type属性がradioのinput要素を選択
:reset $(“要素:reset”) type属性がresetのinput要素を選択
:selected $(“要素:selected”) 選択されたセレクトボックスを選択
:submit $(“要素:submit”) type属性がsubmitのbutton要素・input要素
:text $(“要素:text”) type属性がtextのinput要素を選択
jQuery独自のフィルター
:first $(“要素:first”) セレクタの中から最初の要素を選択
:last $(“要素:lasr”) セレクタの中から最後の要素を選択
:even $(“要素:even”) セレクタの中から偶数番目に出現する要素を選択
:odd $(“要素:odd”) セレクタの中から奇数番目に出現する要素を選択
:eq(n) $(“要素:eq(n)”) セレクタの中からn番目の要素を選択
:lt(n) $(“要素:lt(n)”) セレクタの中からn番目より前の要素を選択
:gt(n) $(“要素:gt(n)”) セレクタの中からn番目より後の要素を選択
:header $(“:header”) h1~h6までのheading要素をまとめて選択
:contains(‘str’) $(“要素:contains(‘文字列’)”) 特定の文字列が含まれている要素を選択
:has(element) $(“要素:has(要素)”) 特定の要素が含まれている要素を選択
:parent $(“要素:parent”) 何らかの子要素やテキストを含む要素を選択