jQueryのセレクターについて
jQueryではCSSと同じようなセレクターを使って、操作するDOMの要素を選択することができます。
セレクターで要素を選択して、メソッドで操作することにより、色を変更したり文字列を変更するなどの処理ができます。
例えば、
$('p').css('color', 'skyblue');
のようにすると、全てのP要素の色を水色にできます。
上記の例では$('p')
の部分がセレクターで、css('color', 'skyblue');
の部分がメソッドになります。
基本的なセレクター
基本的なセレクターには以下のような種類があります。
- 要素セレクター
- クラスセレクター
- IDセレクター
- グループセレクター
- ユニバーサルセレクター
それぞれのセレクターについて紹介します。
要素セレクター
HTMLの要素(タグ)を選択するセレクターです。
H1タグを選択したいときは
$('h1')
というように記述します。
例えば、
$('p').css('color', 'skyblue');
のようにすると、全てのP要素の色を水色にできます。
クラスセレクター
クラス名を指定して選択するセレクターです。
クラス名を指定するときは.
(ドット)を用います。
例えば、
<ul>
<li class="fruit">りんご</li>
<li class="fruit">みかん</li>
<li class="vegetable">じゃがいも</li>
<li class="vegetable">にんじん</li>
</ul>
上のようなHTMLにおいて
$('.fruit').css('color', 'skyblue');
のようにするとクラスがfruit
の要素を指定することができ、「りんご」と「みかん」の文字が水色になります。
IDセレクター
IDを指定して選択するセレクターです。
IDを指定するには#
を用います。
<ul>
<li id="apple">りんご</li>
<li id="orange">みかん</li>
<li id="potato">じゃがいも</li>
<li id="carrot">にんじん</li>
</ul>
上のようなHTMLにおいて
$('#apple').css('color', 'red');
のようにするとIDがapple
の要素を指定することができ、「りんご」の文字が赤色になります。
グループセレクター
複数のセレクターを用いて要素を選択することをグループセレクターと言います。
グループセレクターを指定するには、複数のセレクターを,
で区切ります。
<ul>
<li id="apple">りんご</li>
<li id="orange">みかん</li>
<li id="potato">じゃがいも</li>
<li id="carrot">にんじん</li>
</ul>
上のようなHTMLにおいて
$('#apple, #orange').css('color', 'red');
のようにするとIDがapple
とorange
の要素を指定することができ、「りんご」と「みかん」の文字が赤色になります。
ユニバーサルセレクター
全ての要素をしていするセレクターです。
ユニバーサルセレクターは*
を用います。
$('*').css('color', 'red');
とすると全ての要素の文字が赤色になります。
階層を指定するセレクター
階層を指定するセレクターには以下のような種類があります。
- 子孫セレクター
- 子セレクター
- 隣接セレクター
- 兄弟セレクター
子孫セレクター
ある要素の中(下階層)にある要素を選択するセレクターです。
子孫セレクターは半角スペースを入れて階層構造を表現します。
<div class="food">
<ul>
<li>りんご</li>
<li>みかん</li>
<li>じゃがいも</li>
<li>にんじん</li>
</ul>
</div>
上記のようなHTMLにおいて、クラスがfood
である要素中の全li
タグを選択するには
$('.food li')
のように.food
とli
の間に半角スペースを入れます。
$('.food li').css('color', 'red');
とするとクラスがfood
である要素中の全li
タグが選択され、「りんご」「みかん」「じゃがいも」「にんじん」の文字が赤色になります。
子セレクター
ある要素の直下(1つ下の階層)にある要素を選択するセレクターです。
子セレクターは、>
を入れて階層構造を表現します。
<ul class="oya">
<li>子1</li>
<li>子2</li>
<ul>
<li>孫1</li>
<li>孫2</li>
</ul>
</li>
</ul>
上のようなHTMLにおいて
$('ul.oya > li')
とするとクラスがoya
であるul
の直下にあるli
を選択します。
$('ul.oya > li').css('color', 'red');
とすると「子1」「子2」が赤色になりますが、「孫1」「孫2」は変化しません。
隣接兄弟セレクター
隣接している兄弟要素(同じ親を持つ要素)で後ろにあるものを選択するセレクターです。前にあるものは対象になりません。
隣接兄弟セレクターは、+
を入れて階層構造を表現します。
<div class="chapter">
<p class="text1">テキスト1</p>
<p class="text2">テキスト2</p>
<p class="text3">テキスト3</p>
<p class="text4">テキスト4</p>
</div>
上のようなHTMLにおいて
$('.text2 + p')
のようにすると3番目のpタグが選択されます。
$('.text2 + p').css('color', 'red');
とすると「テキスト3」という文字列が赤色になります。
一般兄弟セレクター
兄弟要素(同じ親を持つ要素)で後ろにあるものを全て選択するセレクターです。前にあるものは対象になりません。
一般兄弟セレクターは、~
(チルダ)を入れて階層構造を表現します。
<div class="chapter">
<p class="text1">テキスト1</p>
<p class="text2">テキスト2</p>
<p class="text3">テキスト3</p>
<p class="text4">テキスト4</p>
</div>
上のようなHTMLにおいて
$('.text2 ~ p')
のようにすると3番目と4番目のpタグが選択されます。
$('.text2 ~ p').css('color', 'red');
とすると「テキスト3」「テキスト4」という文字列が赤色になります。
属性セレクター
要素の属性を指定し選択するセレクターです。
属性を指定するには[]
を用います。
$('a[target]')
とするとtarget
属性を持つ全てのaタグを選択することができます。
また、
$('a[target="_blank"]')
とするとtarget
属性が_blank
である全てのaタグを選択できます。
属性セレクターには他にも以下のような種類があります。
フォーマット | 内容 | 例 |
---|---|---|
$(‘[attribute]’) | attributeという属性を持つ要素 | $(‘img[alt]’) alt属性を持つimgタグ |
$(‘[attribute=”value”]’) | attribute属性の値がvalueの要素 | $(‘a[target=”_blank”]’) targetが_blankのaタグ |
$(‘[attribute!=”value”]’) | attribute属性の値がvalueでない要素 | $(‘a[target!=”_blank”]’) targetが_blankでないaタグ |
$(‘[attribute*=”value”]’) | attribute属性の値がvalueを含む(部分一致する)要素 | $(‘input[name*=”text”]’) nameがtextを含むinput |
$(‘[attribute~=”value”]’) | attribute属性の値がvalueである要素。空白区切で複数のvalueを含めることができる。 | $(‘input[name~=”text”]’) <input name="text sample">など |
$(‘[attribute^=”value”]’) | attribute属性の値がvalueで始まる(前方一致)する要素 | $(‘a[href^=”https”]’) hrefがhttpsで始まる値のaタグ |
$(‘[attribute$=”value”]’) | attribute属性の値がvalueで終わる(後方一致)する要素 | $(‘a[href$=”.html”]’) hrefが.htmlで終わる値のaタグ |
$(‘[属性セレクター1][属性セレクター2]’) | 上記の属性セレクターの組み合わせ | $(‘a[href^=”https”][target=”_blank”]’) hrefがhttpsで始まり、targetが_blankのaタグ |
フィルター
選択した要素に対してフィルターをかけ、さらに絞り込むことができます。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>
上のようなHTMLにおいて
$('li:first').css('color', 'red');
のようにすると「りんご」という文字列が赤色になります。
$('li')
で全てのli
タグが選択されますが、:first
というフィルターをかけて最初の要素のみに限定しています。
基本のフィルター
基本のフィルターには以下のような種類があります。
フォーマット | 内容 |
---|---|
:first | 選択した要素の最初の要素 |
:last | 選択した要素の最後の要素 |
:even | 選択した要素の偶数番目の要素 |
:odd | 選択した要素の奇数番目の要素 |
:eq(n) | 選択した要素のn番目の要素 |
:gt(n) | 選択した要素のnより後の要素 |
:lt(n) | 選択した要素のnより前の要素 |
:first-child | 選択した要素の親から見て最初の子要素 |
:last-child | 選択した要素の親から見て最後の子要素 |
:nth-child(N) | 選択した要素のN番目の要素。even、odd、3n+1なども指定できる。 |
:only-child | 選択した要素の親から見て唯一の子要素を選択 |
:nth-child(N) | 選択した要素の |
:not(セレクター1) | 選択した要素のうちセレクター1にマッチしない要素 |
:contains(文字列) | 選択した要素のうち指定した文字列を含む要素 |
:header | h1~h6のヘッダー要素 |
:animated | 選択した要素のうちアニメーションが動作中の要素 |
コンテンツフィルター
要素が含んでいるコンテンツにより選択するフィルターです。
フォーマット | 内容 |
---|---|
:contains(文字列) | 選択した要素のうち指定した文字列を含む要素 |
:has(セレクター1) | 選択した要素のうち、セレクター1で選択した要素を持つもの |
:empty | 選択した要素のうち子要素を持たない要素 |
:parent | 選択した要素のうち親要素である(子要素を持つ)要素 |
フォームフィルター
フォームの要素を選択するときに使用するフィルターです。タイプや状態などを指定して要素を限定することができます。
タイプを指定するフィルター
フォーマット | 内容 |
---|---|
:button | ボタン要素(<button>と<input type="button">)を選択 |
:checkbox | チェックボックスを選択 |
:input | 全てのinput、textarea、select、buttonの要素を選択 |
:radio | ラジオボタンを選択 |
:text | テキストボックスを選択 |
:reset | リセットボタンを選択 |
:submit | submit要素を選択 |
:password | パスワード入力フォームを選択 |
:file | ファイル選択フォームを選択 |
:image | 画像ボタンを選択 |
状態を指定するフィルター
フォーマット | 内容 |
---|---|
:checked | チェックされている要素を選択 |
:selected | 選択されている要素を選択 |
:enabled | 利用可能な状態の要素 |
:disabled | 利用不可能な状態の要素 |
:visible | 表示状態の要素 |
:hidden | 非表示状態の要素 |
is()メソッド
jQueryオブジェクトで指定した要素集合と、引数で指定したセレクターが1つでもマッチしたときにtrueを返します。1つもマッチしないときはfalseを返します。
<p class="text1">テキスト1</p>
<p class="text2">テキスト2</p>
<p class="text3">テキスト3</p>
上のようなHTMLにおいて
$('p').is('.text1')
とするとtrue
を返します。この例では$('p')
がjQueryオブジェクトで指定した要素集合で、'.text1'
が引数で指定したセレクターになります。