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'が引数で指定したセレクターになります。
