2012年08月
特定の属性の値が、特定の文字列で始まっている要素を選択できる。
<script type="text/javascript">
$(function(){
$("[title^='f']").css("color","#9cf");
});
</script>
<ul> <li title="first">テキスト1テキスト1テキスト1</li> <li title="second">テキスト2テキスト2テキスト2</li> <li title="third">テキスト3テキスト3テキスト3</li> <li title="fourth">テキスト4テキスト4テキスト4</li> </ul>
title属性の値が「f」で始まる要素、つまり1番目と4番目のli要素が#9cfの色になる。
特定の属性が、特定の値を持たない要素を選択できるセレクター。([属性='value']の反対の意)
このセレクターは要素セレクターの後に続けて記述する必要がある。
<script type="text/javascript">
$(function(){
$("li[title!='first']").css("color","#9cf");
});
</script>
<ul> <li title="first">テキスト1テキスト1テキスト1</li> <li title="second">テキスト2テキスト2テキスト2</li> <li title="third">テキスト3テキスト3テキスト3</li> <li title="fourth">テキスト4テキスト4テキスト4</li> </ul>
title属性の値が「first」以外のli要素（1番目以外のli要素）が#9cfの色になる。
特定の属性が、特定の値を持つ要素を選択できるセレクター。
<script type="text/javascript">
$(function(){
$("[title='second']").css("color","#9cf");
});
</script>
<ul> <li title="first">テキスト1テキスト1テキスト1</li> <li title="second">テキスト2テキスト2テキスト2</li> <li title="third">テキスト3テキスト3テキスト3</li> <li title="fourth">テキスト4テキスト4テキスト4</li> </ul>
title属性の値が「second」の要素、つまり2番目のli要素が#9cfの色になる。
jQueryは、要素の属性や属性値を条件に絞り込める「属性セレクター」にも対応している。
それぞれ [...] 内に条件を記述して使う。
特定の属性を持つ要素を選択できるセレクター。
<script type="text/javascript">
$(function(){
$("[id]").css("color","#9cf")
});
</script>
<ul> <li id="first">テキスト1テキスト1テキスト1</li> <li class="second">テキスト2テキスト2テキスト2</li> <li id="third">テキスト3テキスト3テキスト3</li> <li class="fourth">テキスト4テキスト4テキスト4</li> </ul>
id属性を持つ要素（1番目と3番目のli要素）が#9cfの色になる。
セレクターに特定の要素が１つだけ含まれる場合、「only-child擬似クラス」で選択できる。
セレクターの後ろに“:only-child”と記述する。
<script type="text/javascript">
$(function(){
$("span:only-child").css("color","#9cf");
});
</script>
<ul> <li><span>テキスト1</span>テキスト1テキスト1</li> <li><span>テキスト2</span>テキスト2<span>テキスト2</span></li> <li>テキスト3テキスト3テキスト3</li> <li>テキスト4テキスト4テキスト4</li> </ul>
1番目のspan要素だけが#9cfの色になる。
2番目のli要素にはspan要素が複数含まれるため、対象にならない。
下記は上記ソースコードの結果、
