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

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

[ 属性名 ~= '値' ]単語として属性の値に含まれる要素を選択

構文

指定した値が単語として属性の値に含まれる要素を選択
$("[ 属性 ~= '値' ]")ver1.0〜
※~はマイナスではなくチルダです。

機能

属性とはタグに記述される各種設定のことです。例えばaタグであればhrefやtargetが属性となります。
[ ]内に属性と値を~=(~はマイナスではなくチルダです)で挟んでを記述すると、[ ]内に指定した属性の値を「単語として持っている」要素が選択されます。
[ ]内には1つの属性しか記述できません。複数の属性を指定したい場合は複数の属性を利用してください。

解説

単語として含むということ(1)

サンプル(containsWord/01.html)を開いてcssの設定を確認してください。big, small, blue, greenと4つのクラスが設定されています。続いてbody内の構成を確認して下さい。div要素が4つあり、それぞれbig, small, blue, greenのclass属性から2つの値が設定されています。

<div class="big blue">big<br>blue</div><br>
<div class="big green">big<br>red</div><br>
<div class="small blue">small<br>blue</div><br>
<div class="small green">small<br>red</div><br>

jQueryは以下の様に記述され、buttonをクリックするとclass属性にbigを持つ要素を選択します。選択された要素はcssメソッドを利用して背景色をピンクにします。

$("button").click(function(){	
	$("[class~='big']").css("background-color","#f99");
});

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

単語として含むということ(2)

containsWord/01.htmlでは「単語として含む」の意味が変わりにくいので、もう1つサンプルを確認します。 サンプル(containsWord/02.html)をbody内の構成を確認し、一番上のdiv要素に設定されclass属性の値が「big2」に変更されているのを確認してください。jQueryはcontainsWord/01.htmlから変更ありません。

<div class="big2 blue">big2<br>blue</div><br>
<div class="big green">big<br>red</div><br>
<div class="small blue">small<br>blue</div><br>
<div class="small green">small<br>red</div><br>

big2はbigと異なる単語になります。そのためbuttonをクリックしてもbig2のclass属性をもつ一番上のdiv要素は選択されず、背景色は変わりません。

もしbig2も選択したいのであれば[属性名*="値"]を利用し、bigを含む要素を選択するようにします。
→参考:サンプル(containsWord/02b.html

関連項目

単語としてではなく、文字として含む要素を選択する場合は[属性名*="値"]を利用してください。

メモ

完全一致ではありません

このセレクタは[属性名="値"]と混同しやすいので注意しましょう。[属性名="値"]では属性の値が完全一致した要素しか選択されません。
サンプル(containsWord/test01.html)を開いて、body内の構成がcontainsWord/01.htmlと同じことを確認して下さい。しかしjQueryではセレクタ部分が以下の様に[属性名="値"] に変更されています。

$("button").click(function(){
	$("[id='big']").css("background-color","#f99");
});

この設定ではclass属性がbigだけ(完全一致)の場合しか選択されないため、どのdiv要素も選択されません。

サンプル(containsWord/test02.html)を開いてjQueryはcontainsWord/test01.htmlから変更がないことを確認して下さい。body内は変更され、以下の様にclass属性にbigしか設定されていないdivが1つ追加されています。このように純粋にbigしか設定されていない場合のみ完全一致するので、[属性名="値"]で選択することができます。

<div class="big">big</div><br>
<div class="big blue">big<br>blue</div><br>
<div class="big green">big<br>red</div><br>
<div class="small blue">small<br>blue</div><br>
<div class="small green">small<br>red</div><br>