Web制作の現場で使えるjQuery UIデザイン入門 ― 第4回
初めてのjQuery：セレクターAPIを一挙解説（後編）
2009年07月30日 10時00分更新
※この記事は「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要素が赤色になります。
 |
|---|
■[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要素が赤色になります。
 |
|---|
「まとめて読みたい！」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。
Web制作の現場で使う
jQueryデザイン入門
本体 3,330円＋税、B5変形判344ページ（オール4色刷）
ISBN978-4-04-868411-8
■[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要素が赤色になります。
 |
|---|
「まとめて読みたい！」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。
Web制作の現場で使う
jQueryデザイン入門
本体 3,330円＋税、B5変形判344ページ（オール4色刷）
ISBN978-4-04-868411-8
この連載の記事
- 最終回 実務で使えるjQueryプラグイン3選
- 第25回 制作現場で役立つjQueryプラグインの使い方
- 第24回 jQueryとAjaxで作るスムーズページング
- 第23回 jQuery＋CSSによるカルーセルパネルの作り方
- 第22回 jQueryでバリデーション付きメールフォームを作ろう
- 第21回 jQueryで自作するフローティングウィンドウ
- 第20回 jQueryによるLightbox風モーダルウィンドウの作り方
- 第19回 jQueryで作る多階層ドロップダウンメニュー
- 第18回 IE6対応！jQueryで透過PNGのロールオーバーを作る
- 第17回 jQueryでロールオーバー！プリロード対応版
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
