jQuery – 属性セレクタの例
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[デモを試してください]