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

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

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

構文

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

機能

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

解説

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

サンプル(start/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属性の値は「test01」と「test02」)が選択され、背景色が緑になります。

関連項目

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

メモ

ページ内リンクのhref属性のみを取得

このセレクタはサンプルの「スムーススクロール」で利用しています。ページ内リンクは必ず#ではじまるため、以下の様に記述することでページ内リンクのみ取得できるのです。

$("a[href^=#]").click(function() {
	return false;
});