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

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

[属性名|='値']派生した属性を持つ要素を選択

構文

属性の値が一致 or ハイフンを付けた派生値を持つ要素を選択
$("[ 属性 |= '値' ]")ver1.0〜
※|はビックリマークではなくパイプです。

機能

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

解説

派生語の選択

サンプル(containsPrefix/01.html)を開いてbody内の要素を確認して下さい。div要素が4つあり、すべてにclass属性が設定され、値は上からtest-01, test-02, test01, test02となっています。

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

jQueryは以下の様に記述され、buttonをクリックするとtestにハイフンを付けた派生値の要素だけを選択し、cssメソッドにより背景色を緑にします。

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

結果として、buttonをクリックすると上2つのdiv要素が選択され背景色が緑になります。
前方一致の[属性名^="値"]とは異なりtest01やtest02が選択されないことに注意してください。

完全一致ではありません

このセレクタは完全一致しないと選択されない[属性名="値"]と異なり、class属性が複数あった場合でも条件に合う値があれば選択することができます。サンプル(containsPrefix/02.html)を開いて、body内で以下の様に1番上のclass属性の値にsampleが追加されていることを確認して下さい。

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

testにハイフンを付けた派生値が含まれば選択されるので、buttonをクリックすると上2つのdiv要素が選択され背景色が緑になります。

メモ

使いどころがよく分かりません。とりあえず似たようなclass属性の名前を設定するときには-(ハイフン)を利用した派生語にすると良いのでしょうか?。