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

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

[ 属性名 $= '値' ]属性の値と後方一致する要素を選択

構文

指定した値が属性の値と後方一致する要素を選択
$("[ 属性 $= '値' ]")ver1.0〜

機能

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

解説

属性の値と後方一致する要素を選択

サンプル(ends/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をクリックすると下の2つのdiv要素(class属性の値は「01test」と「02test」)が選択され、背景色が緑になります。

関連項目

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

メモ

拡張子のチェックとかに利用できる(と思う)

後方一致というと拡張子などのチェックに利用できると思います。サンプル(ends/test01.html)を開いてbody内に3つのa要素があり、href属性が設定されていることを確認して下さい。

リンク先のファイルはダミーなので存在しません(なのでリンクはクリックしないで下さい)。着目するのはリンクしているファイルの拡張子です。上からxml/txt/htmlとなっています。

<button>click</button><br>
<a href="test.xml" target="_blank">test.xml</a><br>
<a href="test.txt" target="_blank">test.txt</a><br>
<a href="test.html" target="_blank">test.html</a>

jQueryは以下の様に記述され、[属性名$="値"]を利用してhref属性の値がxmlで終わる要素を選択するようにしました。選択された要素はcssメソッドを利用して背景色を緑にします。

$("button").click(function(){
	$("a[href$='xml']").css("background-color","#9f9");
});

結果として、buttonをクリックするとxmlファイルへのリンクを持つ一番上のリンクが選択され、背景色が緑色になります。