jQueryの基本まとめ - CSSセレクタを使おう - #JavaScript

よく忘れるやつをメモりんこ

jQueryのセレクタゆるっとまとめ

書式	指定対象	例	名称
$('要素')	特定の要素	$('div')	要素セレクター
$('#ID名')	特定のid属性をもつ要素	$('#hoge')	IDセレクター
$('.CLASS名')	特定のclass属性をもつ要素	$('.hoge')	クラスセレクター
$('要素A 要素B')	要素Aの内側にある要素B	$('.hoge .fuga')	子孫セレクター
$('*')	全てのセレクタ	$('*')	ユニバーサルセレクター
$('A, B')	要素Aと要素B	$('#hoge, .fuga')	グループセレクター
$('要素A > 要素B')	特定の要素Aの直下に配置された要素B (Aの中にB)	$('#hoge > .fuga')	子セレクター
$('要素A + 要素B')	要素Aの次に出現する要素B (AとBは同じ階層)	$('#hoge + .fuga')	隣接セレクター
$('要素A ~ 要素B')	要素Aの後に出現する要素~要素D (Aの次~B)	$('#hoge ~ .fuga')	間接セレクター
$('要素:empty')	子要素やテキストを含まない要素	$('p:empty')	empty擬似クラス
$('要素:parent')	子要素やテキストを含む要素	$('p:parent')	parentフィルター
$('要素:only-child')	セレクタに特定の要素が1つだけ含まれている要素	$('li span:only-child')	only-child擬似クラス

HTMLの読み込みが終わったら実行される

$(document).ready(function(){
});

// 省略形
$(function(){
});

グループセレクタ ('A, B')

グループセレクタでは複数のセレクタをカンマ区切りで指定できる。
ただし、１つのシンタックス''の中でカンマ区切りをすること。

$(function(){
  $('#first, #second').css('color', 'red');
  // $('#first', '#second').css('color', 'red'); エラー。よくやるw
});

<ul>
    <li id="first">テキストテキストテキストテキスト</li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

子セレクタ ('A > B')

特定の要素の直下に配置された要素を選択できる

$(function(){
  $('#first > span').css('color', 'red'); // firstのspan
});

<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキスト<span>テキスト</span>テキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

隣接セレクタ ('A + B')

特定の要素の次に出現する要素を選択できる

$(function(){
  $('#first + li').css('color', 'red'); // second
});

<ul>
    <li id="first"><span>テキスト</span>テキストテキストテキストテキスト</li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

関接セレクタ ('A ~ B')

特定のセレクタの後に出現する要素を選択できる
※ ここでは#secondは含まれないので要注意。

$(function(){
  $('#second ~ #fourth').css('color', 'red'); // third, fourth
});

<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

子要素やテキストが無い要素を選択 (:empty)

$(function(){
  $('li:empty').css('color', 'red'); // first, 最後のli
});

<ul>
    <li id="first"></li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li></li>
</ul>

子要素やテキストを含む要素を選択 (:parent)

$(function(){
  $('li:parent').css('color', 'red'); // second, third
});

<ul>
    <li id="first"></li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li></li>
</ul>

セレクタに特定の要素が1つだけ含まれている要素を選択 (:only-child)

$(function(){
  $('li span:only-child').css('color', 'red'); // firstのspan
});

<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

特定の文字列が含まれている要素を選択 (:contains)

$(function(){
  $('li:contains("HIT")').css('color', 'red'); // first
});

<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

特定の要素が含まれている要素を選択 (:has)

$(function(){
  $('li:has(span)').css('color', 'red'); // first, second
});

<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>