HTML
CSS
JavaScript
jQuery

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

More than 1 year has passed since last update.

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


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')

グループセレクタでは複数のセレクタをカンマ区切りで指定できる。

ただし、1つのシンタックス''の中でカンマ区切りをすること。

$(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>