HOME > リファレンス > jQuery > jQuery API一覧 > Selectors > [attribute]

[attribute]

引数

[name|="value"]: nameの値がvalueで区切られている要素。valueのみか、value-
[name*="value"]: nameの値にvalueが含まれている要素
[name~="value"]: nameの値にvalueが存在しスペースで区切られている要素
[name$="value"]: nameの値がvalueで終わる要素
[name="value"]: nameの値がvalueであるもの
[name!="value"]: nameの値がvalueではない要素
[name^="value"]: nameの値がvalueで始まる要素

サンプル

実行結果

javascript
attr
attr2
class-name
List
attr_3
javascript
javascript
listclass
classname
claname
javascript
xx-attr-yy
xx attr yy
java
perl
php
attr-author
python
ruby
go
python
python
scala
attributes
python

Javascript

$('.jqTest button').each(function(){
if ($(this).attr('class') === 'reset') {
$(this).click(function(){
$('.jqTest li').css({ backgroundColor: '#FFFFFF'});
});
} else {
$(this).click(function(){
$($(this).text(), '.jqTest ul').css({ backgroundColor: '#009900'});
});
}
});

HTML

<div class="jqTest">
<button>[class|="attr"]</button>
<button>[class*="class"]</button>
<button>[class~="attr"]</button>
<button>[class$="name"]</button>
<button>[class="javascript"]</button>
<button>[class!="python"]</button>
<button>[class^="p"]</button>
<ul>
<li class="javascript">javascript</li>
<li class="attr">attr</li>
<li class="attr2">attr2</li>
<li class="class-name">class-name</li>
<li class="List">List</li>
<li class="attr_3">attr_3</li>
<li class="javascript">javascript</li>
<li class="javascript">javascript</li>
<li class="listclass">listclass</li>
<li class="classname">classname</li>
<li class="claname">claname</li>
<li class="javascript">javascript</li>
<li class="xx-attr-yy">xx-attr-yy</li>
<li class="xx attr yy">xx attr yy</li>
<li class="java">java</li>
<li class="perl">perl</li>
<li class="php">php</li>
<li class="attr-author">attr-author</li>
<li class="python">python</li>
<li class="ruby">ruby</li>
<li class="go">go</li>
<li class="python">python</li>
<li class="python">python</li>
<li class="scala">scala</li>
<li class="attributes">attributes</li>
<li class="python">python</li>
</ul>
<button class="reset">リセット</button>
</div>