前回のjQueryの基本(その2)からの続編です。前回は個々の要素セレクタとID、クラスなどでアクセスしましたが、今回はちょっとこれまた便利なアトリビュートを使ったアクセス方法です。

• CSSでグループ（ID）にアクセスする
• 固有のアトリビュートでCSSにアクセスする
• 固有のアトリビュートが持つ値を指定してCSSにアクセスする
• 要素セレクタとアトリビュート（とその値）からCSSにアクセスする
• notを指定して指定以外のアトリビュートでCSSにアクセスする
• 複数のアトリビュートでCSSにアクセスする

CSSでグループ（ID）にアクセスする

　CSSでの記述でIDが割り振られている要素というようにそのグループにアクセスすることができます。IDが付加されていない要素セレクタにはアクセスしません。このjQueryのアクセス方法はセレクタからのアクセス方法ではなく、アトリビュート、つまりxhtmlタグ内に書かれたアトリビュートから選択しアクセスします。
xhtmlソース

<ul>
    <li id="sample">項目1</li>
    <li id="sample">項目2</li>
    <li id="sample">項目3</li>
    <li>項目4</li>
</ul>

CSSのコード

#sample {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("[id]").css("color","#ff0000");
    })
</script>

文法的には、

#<IDセレクタ> {
    <プロパティー>:<値>;
}

が、

$("[id]").css("<プロパティー>","<値>");

という風になっています。この方法ではIDが割り振られているかどうかではなくて、<li id=""></li>という風にIDの値が空であってもアクセスします。これはセレクタではなくアトリビュートにアクセスしているからです。

固有のアトリビュートでCSSにアクセスする

xhtmlソース

<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p>アトリビュートにアクセスします。</p>

CSSのコード

p {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("[title]").css("color","#ff0000");
    })
</script>

文法的には

$("[<アトリビュート>]").css("<プロパティー>","<値>");

という風になっています。この方法ではtitleが割り振られている要素にのみアクセスします。

固有のアトリビュートが持つ値を指定してCSSにアクセスする

　前述の方法はアトリビュートのみを対象にアクセスしましたが、ここではアトリビュートが持つその値を含めてアクセスすることができる方法です。
xhtmlソース

<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p title="OK">アトリビュートの値にアクセスします。</p>
<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p>アトリビュートにアクセスします。</p>

CSSのコード

p {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("[title='OK']").css("color","#ff0000");
    })
</script>

文法的には

$("[<アトリビュート>='<アトリビュートの値>']").css("<プロパティー>","<値>");

という風になっています。この方法ではtitleが割り振られていて且つ「OK」という値を持つ要素セレクタのみにアクセスします。
アトリビュートの値は'シングルクォートで囲うのが肝です。（"ダブルクォートだと外側のダブルクォートとダブります。）

要素セレクタとアトリビュート（とその値）からCSSにアクセスする

　上記の<p title="">という場合には要素セレクタにpが指定されています。より詳細にp要素に含まれるアトリビュートを指定することもできます。
xhtmlソース

<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p title="OK">アトリビュートの値にアクセスします。</p>
<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p>アトリビュートにアクセスします。</p>

CSSのコード

p {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("p[title='OK']").css("color","#ff0000");
    })
</script>

文法的には

$("<要素セレクタ>[<アトリビュート>='<アトリビュートの値>']").css("<プロパティー>","<値>");

または、アトリビュートの値を指定しない場合は、

$("<要素セレクタ>[<アトリビュート>]").css("<プロパティー>","<値>");

という風になっています。

notを指定して指定以外のアトリビュートでCSSにアクセスする

　=で結ばれた文法はnotを指定して「!=」(〜ではない)を指定することができます。上記の例では、title="OK"以外の要素を指定してCSSにアクセスできるわけです。
xhtmlソース

<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p title="OK">アトリビュートの値にアクセスします。</p>
<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p>アトリビュートにアクセスします。</p>

CSSのコード

p {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("p[title!='OK']").css("color","#ff0000");
    })
</script>

文法的には

$("<要素セレクタ>[<アトリビュート>!='<アトリビュートの値>']").css("<プロパティー>","<値>");

という風になっています。この場合は当然ながらアトリビュートに値がない場合は意味がありません。

　jQueryは正規表現の臭いのする文法でもって様々なアトリビュートの値にアクセスできます。

• = アトリビュートの値がイコールの場合。（値そのものにマッチ）
• != アトリビュートの値がそれ以外の場合。（値以外にマッチ）
• ^= アトリビュートの値の先頭の文字に指定の文字列が含まれている場合。（先頭の文字にマッチ）
• $= アトリビュートの値の末尾の文字に七重の文字列が含まれている場合。（末尾にマッチ）
• *= アトリビュートの値に指定の文字列が含まれている場合。（文字列の中身にマッチ）

複数のアトリビュートでCSSにアクセスする

xhtmlソース

<p title="Attribute Access">アトリビュートにアクセスします。</p>
<p title="OK">アトリビュートの値にアクセスします。</p>
<p title="NO">アトリビュートにアクセスします。</p>
<p title="YES">アトリビュートにアクセスします。</p>

CSSのコード

p {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("p[title='OK'],p[title='YES']").css("color","#ff0000");
    })
</script>

文法的には

$("<要素セレクタ>[<アトリビュート>='<アトリビュートの値>'],<要素セレクタ>[<アトリビュート>='<アトリビュートの値>']").css("<プロパティー>","<値>");

という風になっています。複数指定する場合でももちろん!=や*=などの正規表現風な属性指定ができます。