このページの本文へ

DESIGN Web制作の現場で使えるjQuery UIデザイン入門 ― 第4回

初めてのjQuery:セレクターAPIを一挙解説(後編)

2009年07月30日 10時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第4回です。過去の記事もご覧ください。


前編からの続き)


4.CSSの属性セレクター

 jQueryは、CSSの属性セレクターの多くにも対応しています。属性セレクターとは、要素の持つ属性の条件で絞り込めるセレクターです。[...] の内側に属性の条件を記述します。


■[attribute]

 特定の属性を持つ要素を指定できるセレクターです。


▼サンプルコード(HTML部分)


<ul>
    <li id="first">テキストテキストテキストテキストテキスト</li>
    <li class="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li class="fourth">テキストテキストテキストテキストテキスト</li>
</ul>


▼サンプルコード(スクリプト部分)


$(function(){
    $("[id]").css("color","red");
})


▼実行結果(実際のWebページ

 id属性を持つ要素、つまり1行目と3行目のli要素が赤色になります。

サンプル16


■[attribute='value']

 特定の属性が、特定の値を持つ要素を指定できるセレクターです。


▼サンプルコード(HTML部分)


<ul>
    <li title="first">テキストテキストテキストテキストテキスト</li>
    <li title="second">テキストテキストテキストテキストテキスト</li>
    <li title="third">テキストテキストテキストテキストテキスト</li>
    <li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>


▼サンプルコード(スクリプト部分)


$(function(){
    $("[title='second']").css("color","red");
})



▼実行結果(実際のWebページ

 title属性の値がsecondの要素、つまり2行目のli要素が赤色になります。

サンプル17


■[attribute!='value']

 特定の属性が、特定の値を持たない要素を指定できるセレクターです。このセレクターは要素セレクターの後に記述する必要があります。


▼サンプルコード(HTML部分)


<ul>
    <li title="first">テキストテキストテキストテキストテキスト</li>
    <li title="second">テキストテキストテキストテキストテキスト</li>
    <li title="third">テキストテキストテキストテキストテキスト</li>
    <li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>


▼サンプルコード(スクリプト部分)


$(function(){
    $("li[title!='first']").css("color","red");
})



▼実行結果(実際のWebページ

 title属性の値がfirst以外のli要素、つまり1行目以外のli要素が赤色になります。

サンプル18

jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング