【jQuery入門】属性セレクタを使おう！

属性セレクタとは？

例えばHTMLに下記コードがあります。「a」要素の「href」属性が「Google」となっているものを指定することができます。

<p>jQueryの練習</p>
<p><a href="http://google.com">Google</a></p>
<p><a href="http://yahoo.co.jp">Yahoo</a></p>
<p><a href="http://bing.com">bing</a></p>  

属性セレクタの使い方

下記のように要素の後に[]括弧で属性を囲ってあげればOKです。

<script>
$(function(){
$('a[href="http://google.com"]').css('background','red');
});
</script> 

属性を指定する記号

いくつか種類があります。

=

等しい。下記の場合は「http://google.com」が選択されます。

<script>
$(function(){
$('a[href="http://google.com"]').css('background','red');
});
</script> 

 !=

等しくない、～以外。下記の場合は「http://google.com」以外が選択されます。 

<script>
$(function(){
$('a[href!="http://google.com"]').css('background','red');
});
</script> 

 *=

指定した文字列が含まれるものが選択されます。下記の場合はあ「google」が含まれるものが選択されます。

<script>
$(function(){
$('a[href*="google"]').css('background','red');
});
</script>  

 ^=

～から始まるものが選択されます。下記の場合はあ「http」から始まるものが選択されます。

<script>
$(function(){
$('a[href^="http"]').css('background','red');
});
</script> 

 $=

～で終わるものが選択されます。下記の場合は「jp」de終わるものが選択されます。

<script>
$(function(){
$('a[href$="jp"]').css('background','red');
});
</script>