はじめに
仕事をしている際、よく目にする・書くセレクターがあるのでそれらとそれに似たものをまとめました
要素特定のセレクターのみに絞ってまとめたのでぜひ活用してください
JQueryの基本構文
JQuery
$(セレクター). イベント(function(){
$(セレクター). 命令
})
CSSでよく利用されるセレクター
| 名称 |
書式 |
指定対象 |
| 要素セレクター |
$("要素名") |
特定の要素 |
| IDセレクター |
$("ID名") |
特定のid属性を持つ要素 |
| クラスセレクター |
$(".クラス名") |
特定のclass属性を持つ要素 |
| 子孫セレクター |
$("要素1 要素2") |
特定の要素の内側にある要素 |
| ユニバーサルセレクター |
$("*") |
すべての要素 |
| グループセレクター |
$("セレクター1,セレクター2,...") |
複数のセレクター |
CSS2.1のセレクター
| 名称 |
書式 |
指定対象 |
| 子セレクター |
$("親要素名 > 子要素名") |
特定の要素の直下の子要素 |
| 隣接セレクター |
$("要素1 + 要素2") |
特定の要素の次の要素 |
| first-child疑似クラス |
$("要素:first-child") |
要素内の最初の要素 |
CSS3のセレクター
| 名称 |
書式 |
指定対象 |
| 間接セレクター |
$("要素1 ~ 要素2") |
特定の要素の後ろに出現する要素 |
| 否定疑似クラス |
$("要素1:not(要素2)") |
特定の要素のうち要素2の条件を除く要素 |
| empty疑似クラス |
$("要素:empty") |
子要素やテキストを含まない |
| nth-child疑似クラス |
$("要素:nth-child(番号)") |
指定した番号の要素 |
| last-child疑似クラス |
$("要素:last-child") |
要素内の最後の要素 |
| only-child疑似クラス |
$("要素:only-child") |
指定の要素が1つだけ含まれる要素 |
| nth-last-child疑似クラス |
$("要素:nth-last-child(番号)") |
要素内を後ろから数えて指定した番号の要素 |
| nth-of-type疑似クラス |
$("要素:nth-of-type(番号)") |
同一要素で指定した順番にある要素 |
| nth-last-of-type疑似クラス |
$("要素:nth-last-of-type(番号)") |
同一要素で後ろから数えた順番にある要素 |
| first-of-type疑似クラス |
$("要素:first-of-type") |
同一要素で最初に当たる要素 |
| last-of-type疑似クラス |
$("要素:last-of-type") |
同一要素で最後にある要素 |
| only-of-type疑似クラス |
$("要素:only-of-type") |
1つだけ存在する要素 |
| lang疑似クラス |
$("要素:lang(言語)") |
特定の言語を指定された要素 |
CSSの属性セレクター
| 名称 |
書式 |
指定対象 |
| [attribute] |
$("[属性名]") |
特定の属性を持つ要素 |
| [attribute='value'] |
$("[属性名='値']") |
特定の属性が指定した値を持つ要素 |
| [attribute!='value'] |
$("[要素名[属性名!='値']]") |
特定の属性が指定した値を持たない要素 |
| [attribute^='value'] |
$("[属性名^='値']") |
特定の属性が指定した値で始まっている要素 |
| [attribute$='value'] |
$("[属性名＄='値']") |
特定の属性が指定した値で終わっている要素 |
| [attribute*='value'] |
$("[属性名*='値']") |
特定の属性が指定した値を含んでいる要素 |
| [attributeFirst1][attributeFirst2] |
$("[属性セレクター1][属性セレクター2]") |
複数の属性セレクターに該当する要素 |
JQueryの独自セレクター
| 名称 |
書式 |
指定対象 |
| firstセレクター |
$("要素:first") |
指定した要素の最初の要素 |
| lastセレクター |
$("要素:last") |
指定した要素の最後の要素 |
| evenセレクター |
$("要素:even") |
指定した要素の偶数番目の要素(0から数える) |
| oddセレクター |
$("要素:odd") |
指定した要素の奇数番目の要素(0から数える) |
| eqセレクター |
$("要素:eq(番号)") |
指定した番号の要素(0から数える) |
| gtセレクター |
$("要素:gt(番号)") |
指定した番号より後の要素(0から数える) |
| ltセレクター |
$("要素:lt(番号)") |
指定した番号より前の要素(0から数える) |
| headerセレクター |
$(":header") |
h1～h6までのheading要素 |
| containsセレクター |
$("要素:contains(文字列)") |
特定の文字列が含まれている要素 |
| hasセレクター |
$("要素1:has(要素2)") |
特定の要素が含まれている要素 |
| parentセレクター |
$("要素:parent") |
子要素やテキストを含む要素 |
| animated |
$("要素:animated") |
アニメーション中の要素 |
フォームセレクター
| 名称 |
書式 |
指定対象 |
| checkedセレクター |
$("要素:checked") |
ラジオボタン、チェックボックスでチェックが入っている要素 |
| selectedセレクター |
$("要素:selected") |
セレクトボックスで選択されている要素 |
