jQuery の属性セレクタ

jQuery は主にクライアント用に作られているので、FORM を使用した入力コントロールの参照方法に少し工夫が必要です。( ソースコードの例では id を記述していますが、name のみで参照する事ができます )

"#親ID [属性='値']"

ソースコードでは、二つの FORM の下側のフォームの中にあるコントロールの name が "test_name" であるものを参照しています





この場合セレクタは "#test_unit2 [name='test_name']" となっており、test_unit2 内でかつ、name が "test_name" であるように記述されています。
属性値にスペースが含まれて無い場合は、"#test_unit2 [name=test_name]" も動作します。つまり、value 属性で使用する場合は、値を引用符で囲む必要があります。

さらに、[name='test_name'] の前にスペース無しの要素名を書くと、指定した要素のみ対象にする事もできます
例) "#test_unit2 textarea[name='test_name']"

また、指定できるのは、要素名だけでは無く、id や クラスでも有効です
例) "#test_unit2 .test_in[name='test_name']"

<input type="button"
	id="test_button"
	value="実行">

<form id="test_unit1">

	<input type="text"
		id="test_id"
		name="test_name"
		style='width:300px;'>

</form>

▲ と ▼は別々の FORM です 

<form id="test_unit2">

	<input type="text"
		id="test_id"
		name="test_name"
		class="test_in"
		style='width:300px;'>

	<br>

	<textarea
        name="test_name"
		style='width:298px;'>
	</textarea>

</form>
<script type="text/javascript">
$("#test_button").click( function(){
	 $("#test_unit2 [name='test_name']").css("background-color", "#00ff00");   
});
</script>

▲ と ▼は別々の FORM です

"[属性!='値']"

属性セレクタには他にもたくさん指定方法があります。他のセレクタとの組み合わせは『一致した場合』と同じですが、[] 内に書く演算子として、『一致 : =』に対して、『一致しない : !=』となります。( Attribute Not Equal Selector )

"[属性^='値']" と "[属性$='値']"

これは、プログラミングで昔から使われる『最初と最後』を示す記号を使った一致方法です。指定した属性の値の先頭または最後に一致する場合に jQuery が実行されます。

以下のソースコードは、jQuery のドキュメントページにあるものですが、"letter" が 最後にある場合に実行されます( Attribute Ends With Selector )

<input name="newsletter">
<input name="milkman">
<input name="jobletter">
 
<script>
$( "input[name$='letter']" ).val( "a letter" );
</script>

"[属性*='値']"

これはもっとも解りやすいワイルドカードに通じる演算子 * を使用したものです。意味ももちろんそのままで、『含まれる』です。( Attribute Contains Selector )

"[属性~='値']"

これは直感的には解らないセレクタです。名前は、『Attribute Contains Word Selector』と言って、スペースで区切られたワードに対して文字列が一致した場合に jQuery が実行されます。

通常、属性の値にスペースが含まれるのは、value 属性なので、あまり使うことは無いと思います。