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[デモを試してください]