属性セレクタ

【パラメータ】
attribute：属性名
value：属性値
attributeFilter1 ～ attributeFilterN：属性フィルタ

【属性セレクタ (存在)】
jQuery( "[attribute]" ) 1.0

【属性セレクタ (完全一致)】
jQuery( "[attribute='value']" ) 1.0

【属性セレクタ (先頭一致)】
jQuery( "[attribute^='value']" ) 1.0

【属性セレクタ (末尾一致)】
jQuery( "[attribute$='value']" ) 1.0

【属性セレクタ (部分一致)】
jQuery( "[attribute*='value']" ) 1.0

【属性セレクタ (リスト項目一致)】
jQuery( "[attribute~='value']" ) 1.0

【属性セレクタ (プレフィックス)】
jQuery( "[attribute|='value']" ) 1.0

【属性セレクタ (否定)】
jQuery( "[attribute!='value']" ) 1.0

【属性セレクタ (複数 AND)】
jQuery( "[attributeFilter1]～[attributeFilterN]" ) 1.0

<div id="id1">
  <p><input id="inputA" name="Start" value="123" class="classA classB">
    &lt;input id="inputA" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<p id="out1" style="border:1px blue solid; padding:5px;">【出力】</p>

<script>
var msg = "";
var elms;
var i;

msg += "【属性セレクタ (存在)】[disabled]<br>";
elms = $( "#id1 [disabled]" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' disabled=" + elms[i].disabled + "<br>";
}

msg += "<br>【属性セレクタ (完全一致)】[value='456']<br>";
elms = $( "#id1 [value='456']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' value='" + elms[i].value + "'<br>";
}

msg += "<br>【属性セレクタ (先頭一致)】[name^='Start']<br>";
elms = $( "#id1 [name^='Start']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' name='" + elms[i].name + "'<br>";
}

msg += "<br>【属性セレクタ (末尾一致)】[name$='End']<br>";
elms = $( "#id1 [name$='End']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' name='" + elms[i].name + "'<br>";
}

msg += "<br>【属性セレクタ (部分一致)】[name*='Middle']<br>";
elms = $( "#id1 [name*='Middle']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' name='" + elms[i].name + "'<br>";
}

msg += "<br>【属性セレクタ (リスト項目一致)】[class~='classD']<br>";
elms = $( "#id1 [class~='classD']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' class='" + elms[i].className + "'<br>";
}

msg += "<br>【属性セレクタ (プレフィックス)】[lang|='en']<br>";
elms = $( "#id1 [lang|='en']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' lang='" + elms[i].lang + "'<br>";
}

msg += "<br>【属性セレクタ (否定)】input[value!='456']<br>";
elms = $( "#id1 input[value!='456']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' value='" + elms[i].value + "'<br>";
}

msg += "<br>【属性セレクタ (否定)】.not( \"[value='456']\" )<br>";
elms = $( "#id1 input" ).not( "[value='456']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' value='" + elms[i].value + "'<br>";
}

msg += "<br>【属性セレクタ (複数 AND)】[name*='Middle'][value!='456'][class~='classC']<br>";
elms = $( "#id1 [name*='Middle'][value!='456'][class~='classC']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' name='" + elms[i].name + "' value='" + elms[i].value + "' class='" + elms[i].className + "'<br>";
}

$( "#out1" ).html(msg);
</script>

【出力】

---

<div id="id2">
  <p><input id="inputA2" name="Start" value="123" class="classA classB">
    &lt;input id="inputA2" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB2" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB2" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC2" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC2" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD2" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD2" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE2" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE2" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF2" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF2" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<script>
$( "#id2 input:not([disabled])" ).css( "border", "2px red dashed");
</script>