デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

[ 属性名 *= '値' ]属性の値を含む要素を選択

構文

指定した属性の値が含まれる要素を選択
$("[ 属性 *= '値' ]")ver1.0〜

機能

属性とはタグに記述される各種設定のことです。例えばaタグであればhrefやtargetが属性となります。
[ ]内に属性と値を*=で挟んでを記述すると、[ ]内に指定した属性の値を「含む」要素が選択されます。
[ ]内には1つの属性しか記述できません。複数の属性を指定したい場合は複数の属性を利用してください。

解説

属性の値を含む要素を選択

サンプル(contain/01.html)を開いてbody内にdiv要素が4つあることを確認してください。div要素にはすべてclass属性が設定されています(値は上からtest01,test02,01test,02test)。

<div class="test01">class属性が「test01」のdiv</div>
<div class="test02">class属性が「test02」のdiv</div>
<div class="01test">class属性が「01test」のdiv</div>
<div class="02test">class属性が「02test」のdiv</div>

jQueryは以下の様に記述され、buttonをクリックするとclass属性にtestを含む要素を選択します(つまり全て選択されます)。選択された要素はcssメソッドを利用して背景色を緑にします。

$("button").click(function(){	
	$("[class*='test']").css("background-color","#9f9");
});

結果として、buttonをクリックすると4つのdiv要素すべてが選択され、背景色が緑になります。

関連項目

指定した値で始まる要素を選択する場合は[属性名^="値"]を利用します。
指定した値で終わる要素を選択する場合は[属性名$="値"]を利用します。