4．CSSの属性セレクター
jQueryは、CSSの属性セレクターの多くにも対応しています。属性セレクターとは、要素の持つ属性の条件で絞り込めるセレクターです。[...] の内側に属性の条件を記述します。
■[attribute]
特定の属性を持つ要素を指定できるセレクターです。
▼サンプルコード（HTML部分）
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li class="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li class="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("[id]").css("color","red");
})
▼実行結果（実際のWebページ）
id属性を持つ要素、つまり1行目と3行目のli要素が赤色になります。
 |
|---|
■[attribute='value']
特定の属性が、特定の値を持つ要素を指定できるセレクターです。
▼サンプルコード（HTML部分）
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("[title='second']").css("color","red");
})
▼実行結果（実際のWebページ）
title属性の値がsecondの要素、つまり2行目のli要素が赤色になります。
 |
|---|
■[attribute!='value']
特定の属性が、特定の値を持たない要素を指定できるセレクターです。このセレクターは要素セレクターの後に記述する必要があります。
▼サンプルコード（HTML部分）
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li[title!='first']").css("color","red");
})
▼実行結果（実際のWebページ）
title属性の値がfirst以外のli要素、つまり1行目以外のli要素が赤色になります。
 |
|---|
■[attribute^='value']
特定の属性の値が、特定の文字列で始まっている要素を指定できます。
▼サンプルコード（HTML部分）
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("[title^='f']").css("color","red");
})
▼実行結果（実際のWebページ）
title属性の値がfで始まる文字列である要素、つまり1行目と4行目のli要素が赤色になります。
 |
|---|
■[attribute$='value']
特定の属性の値が、特定の文字列で終わっている要素を指定できます。
▼サンプルコード（HTML部分）
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("[title$='d']").css("color","red");
})
▼実行結果（実際のWebページ）
title属性がdで終わっている文字列である要素、つまり2行目と3行目のli要素が赤色になります。
 |
|---|
■[attribute*='value']
特定の属性が、特定の文字列を含んでいる要素を指定できます。
▼サンプルコード（HTML部分）
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("[title*='ir']").css("color","red");
})
▼実行結果（実際のWebページ）
title属性がirを含む文字列である要素、つまり1行目と3行目のli要素が赤くなります。
 |
|---|
■[attributeFilter1][attributeFilter2]
複数の属性セレクターを同時に指定することもできます。
▼サンプルコード（HTML部分）
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("[title^='f'][title*='th']").css("color","red");
})
▼実行結果（実際のWebページ）
title属性がfから始まり、かつtitle属性にthが含まれる文字列である要素、つまり4行目のli要素が赤色になります。
 |
|---|
headerフィルター
「headerフィルター」は、h1～h6までのheading要素をまとめて指定できるフィルターです。
▼サンプルコード（HTML部分）
<h1>テキストテキストテキストテキストテキスト</h1>
<p>テキストテキストテキストテキストテキスト</p>
<h6>テキストテキストテキストテキストテキスト</h6>
▼サンプルコード（スクリプト部分）
$(function(){
$(":header").css("color","red");
})
▼実行結果（実際のWebページ）
1行目のh1要素、3行目のh6要素が赤色になります。
 |
|---|
■containsフィルター / hasフィルター
「containsフィルター」は特定の文字列が含まれている要素を、「hasフィルター」は特定の要素が含まれている要素を指定できます。
▼サンプルコード（HTML部分）
<ul>
<li><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>サンプルサンプルサンプルサンプルサンプル</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:contains('サンプル')").css("color","red");
$("li:has(strong)").css("color","red");
})
▼実行結果（実際のWebページ）
「サンプル」という文字列が含まれる4番目のli要素と、strong要素を含む最初のli要素が赤色になります。
 |
|---|
■parentフィルター
「parentフィルター」は、子要素やテキストを含む要素を指定できるフィルターです。CSS3セレクターで紹介したempty擬似クラスと逆のフィルターです。
▼サンプルコード（HTML部分）
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li></li>
<li>テキストテキストテキストテキストテキスト</li>
<li></li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:parent").css("color","red");
})
▼実行結果（実際のWebページ）
空のli要素以外のli要素、つまり1行目と3行目が赤色になります。
 |
|---|
セレクターAPIのまとめ
ここまでに紹介したとおり、jQueryではさまざまなセレクターを利用して(X)HTMLの要素を指定できます。最後に、jQueryで使えるセレクターをまとめておきましょう（表中の「要素」はセレクターで指定された要素です）。
| 名称 | 書式 | 指定対象 |
|---|---|---|
| CSSでよく利用されるセレクター | ||
| 要素セレクター | $("要素名") | 特定のhtml要素 |
| IDセレクター | $("#ID名") | 特定のid属性の値を持つ要素 |
| クラスセレクター | $(".クラス名") | 特定のclass属性の値を持つ要素 |
| 子孫セレクター | $("要素1 要素2") | 特定の要素の内側にある要素 |
| ユニバーサルセレクター | $("*") | すべての要素 |
| グループセレクター | $("セレクター1,セレクター2,...") | 複数のセレクター |
| CSS2のセレクター | ||
| 子セレクター | $("親要素名 > 子要素名") | 特定の要素の直下の子要素 |
| 隣接セレクター | $("要素1 + 要素2") | 特定の要素の次の要素 |
| first-child擬似クラス | $("要素:first-child") | 特定の要素内の最初の要素 |
| CSS3のセレクター | ||
| 間接セレクター | $("要素1 ~ 要素2") | 特定の要素の後に出現する要素 |
| 否定擬似クラス | $("要素1:not(要素2)") | 特定の要素内の指定した要素以外の要素 |
| empty擬似クラス | $("要素:empty") | 子要素やテキストを含まない要素 |
| nth-child擬似クラス | $("要素:nth-child(番号)") | 特定の要素内の指定した番号の要素 |
| last-child擬似クラス | $("要素:last-child") | 特定の要素内の最後の要素 |
| only-child擬似クラス | $("要素:only-child") | 指定した要素が1つだけ含まれる特定の要素 |
| CSSの属性セレクター | ||
| [attribute] | $("[属性名]") | 特定の属性を持つ要素 |
| [attribute='value'] | $("[属性名='値']") | 特定の属性が指定した値を持つ要素 |
| [attribute!='value'] | $("要素名[属性名!='値']") | 特定の属性が指定した値を持たない要素 |
| [attribute^='value'] | $("[属性名^='値']") | 特定の属性が特定した値で始まっている要素 |
| [attribute$='value'] | $("[属性名$='値']") | 特定の属性が特定した値で終わっている要素 |
| [attribute*='value'] | $("[属性名*='値']") | 特定の属性が特定した値を含んでいる要素 |
| [attributeFilter1][attributeFilter2] | $("[属性セレクター1][属性セレクター2]") | 複数の属性セレクターに該当する要素 |
| jQueryの独自フィルター | ||
| firstフィルター | $("要素:first") | 指定した要素の最初の要素 |
| lastフィルター | $("要素:last") | 指定した要素の最後の要素 |
| evenフィルター | $("要素:even") | 指定した要素の偶数番目の要素 |
| oddフィルター | $("要素:odd") | 指定した要素の奇数番目の要素 |
| eqフィルター | $("要素:eq(番号)") | 指定した番号の要素（番号は0から数える） |
| gtフィルター | $("要素:gt(番号)") | 指定した番号より後の要素（番号は0から数える） |
| ltフィルター | $("要素:lt(番号)") | 指定した番号より前の要素（番号は0から数える） |
| headerフィルター | $("要素:header") | h1～h6までのheader要素 |
| containsフィルター | $("要素:contains(文字列)") | 特定の文字列が含まれている要素 |
| hasフィルター | $("要素1:had(要素2)") | 特定の要素が含まれている要素 |
| parentフィルター | $("要素:parent") | 子要素やテキストを含む要素 |
◆
次回は、セレクターで指定した要素の(X)HTMLやCSSを変更する、さまざまな方法をご紹介します。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
