jQueryでは、属性セレクタは括弧[]内に囲まれています。サポートされている属性セレクタは次のとおりです。
1.属性[A]
“A”属性を持つすべての要素を選択します。
2.属性値は[A = B]に等しい
A属性の値がBと完全に等しいすべての要素を選択します。
-
例:$（ ‘a[rel = nofollow]’） – <a>と一致するすべての要素を選択し、rel属性に ‘nofollow’と正確に等しい値を指定します。
3.属性値が等しくない[A！= B]
Aと同じ値を持つA属性を持たないすべての要素を選択します。
-
例** + $（ ‘a[rel！= nofollow]’） – <a>で一致するすべての要素を選択し、rel属性に ‘nofollow’と正確に等しい値が含まれていない要素を選択します。
4.属性値の開始[A ^ = B]
Bで始まる値を持つA属性を持つすべての要素を選択します。
-
例** + $（ ‘a[rel ^ = nof]’） – <a>で始まる値を持つrel属性を持つ<a>と一致するすべての要素を選択します。
5.属性値の終了[A $ = B]
Bで終わる値を持つA属性を持つすべての要素を選択します。
-
例** + $（ ‘a[rel $ = low]’） – <a>で終わる値を持つrel属性を持つ<a>と一致するすべての要素を選択します。
6.属性値には[A ** = B]
部分文字列Bを含む値を持つA属性を持つすべての要素を選択します。
-
例
+ $（ ‘a[href
= yahoo.com]’） – href属性を持つ<a>と一致するすべての要素を ‘yahoo.com’を含む値で選択します。
7.属性値にはプレフィックス[A | = B]
A属性の値がBに等しいか、Bで始まりハイフン（ – ）で始まるすべての要素を選択します。
-
例題$（ ‘a[lang | = en]’） – lang属性が ‘en’または ‘en-‘に等しい<a>で一致するすべての要素を選択します。
8.属性値が含まれます – スペースで区切られます[A〜= B]
A属性の値がBで、スペースで区切られたすべての要素を選択します。
-
例題$（ ‘div[class〜= jQuery]’） – スペースで区切られた ‘jQuery’に等しい値を持つclass属性を持つ<div>と一致するすべての要素を選択します。例えば、 ‘Hello jQuery’は一致し、 ‘Hello-jQuery’と ‘HellojQuery’は一致しません。
それを再生する
ボタンをクリックして、属性セレクタの周りを再生します。
<html>
<head>
<title>jQuery attribute selector example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div, a{
padding:16px;
}
#msg{
padding:8px;
hright:100px;
}
</style>
</head>
<body>
<h1>jQuery attribute selector example</h1>
<div id="msg"></div>
<div>
<a rel="nofollow" href="http://www.google.com" lang="en-US">
Google - <a rel="nofollow" href="http://www.google.com" lang="en-US">
</a>
</div>
<div>
<a href="http://www.yahoo.com" lang="en">
Yahoo - <a href="http://www.yahoo.com" lang="en" >
</a>
</div>
<div>
<a href="http://www.abc-yahoo.com" lang="-en">
Yahoo - <a href="http://www.abc-yahoo.com" lang="-en">
</a>
</div>
<div class="Hello-jQuery">
class = "Hello-jQuery"
</div>
<div class="Hello jQuery">
class = "Hello jQuery"
</div>
<div class="HellojQuery">
class = "HellojQuery"
</div>
<br/><br/>
<button>a[rel]</button>
<button>a[rel=nofollow]</button>
<button>a[rel!=nofollow]</button>
<button>a[rel^=nof]</button>
<button>a[rel$=low]</button>
<button>a[href** =yahoo.com]</button>
<button>a[lang|=en]</button>
<button>div[class~=jQuery]</button>
<button id="reset">Reset It</button>
<script type="text/javascript">
$("button").click(function () {
var str = $(this).text();
$('a').css("border", "0px solid #000000");
$(str).css("border", "1px solid #ff0000");
$('#msg').html("<h2>Attribute Selector : " + str + "</h2>");
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>
リンク://wp-content/uploads/jQuery/jQuery-attribute-selector.html[デモを試してください]
