61
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

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

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>

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
61
Help us understand the problem. What are the problem?