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

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

[ 属性名 = '値' ]属性の値と完全一致する要素を選択

構文

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

機能

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

解説

指定した値が属性の値と完全一致する要素を選択

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

<div>div</div>
<div class="test">class属性が「test」のdiv</div>
<div>div</div>
<div class="sample">class属性が「sample」のdiv</div>

jQueryは以下の様に記述され、buttonをクリックすると「class属性の値がtest」の要素だけを選択します。選択された要素はcssメソッドで背景色を緑にします。

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

結果として、buttonをクリックすると上から2番目のdiv要素の背景色が緑に変わります。

html要素と組みあわせて利用

属性だけでなくhtml要素も指定したい場合は複数のセレクタ(and)を利用します。
サンプル(equals/02.html)を開いてbody内の構成を確認してください。equals/01.htmlと似ていますが異なっており、div要素とspan要素が2つずつ配置され、各々1つだけclass属性が「test」と設定されています。

jQuery部分は以下の様にセレクタが変更され、span要素が属性の前に設定されています。これでspan要素のうちclass属性がtestの要素だけが選択されるようになります。複数のセレクタ(and)では要素間にスペースがあってはダメなので、spanと[ ]の間にスペースを入れないように注意しましょう。

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

結果として、buttonをクリックすると一番下のspan要素の背景色が緑に変わります。

値は完全一致でないとダメ

このセレクタは属性の値が完全一致でなければ選択されないことに注意してください。
サンプル(equals/03.html)を開いてjQueryはequals/01.htmlから変更がないことを確認して下さい。しかしbody内は以下の様に上から2番目のdiv要素にclassの値(sample)が追加されています。

<div>div</div>
<div class="test sample">class属性が「test sample」のdiv</div>
<div>div</div>
<div class="sample">div</class属性が「sample」のdiv>

このサンプルではbuttonをクリックしても、どの要素も選択されず背景色は変わりません。変更した2番目のdivには「test」のクラス属性があるから選択されると勘違いしがちですが、完全一致でないため選択されません

もし、この様なケースでも選択したい場合は設定したクラスの値と同じように指定します。
サンプル(equals/03b.html)を開いてください。body内の構成はequals/03.htmlから変更ありませんが、jQueryのセレクタ部分は以下の様に変更されています。

$(function () {	
	$("span[class='test sample']").css("border","3px solid red");
});

つまり2番目のdiv要素と完全一致するように設定しました。これでbuttonをクリックすると上から2番目のdiv要素が選択され、背景色が緑になります。

メモ

完全一致にしたくない場合は

完全一致ではなく、複数設定された属性のうち1つが同じ場合に選択したい場合は[属性名-="値"]を利用します。サンプル(equals/test01.html)を開いてください。body内の構成はequals/03.htmlから変更ありませんが、jQueryのセレクタ部分は以下の様に変更されています。

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

この変更によりクラス属性の値に「test」が含まれていれば良くなるため、buttonをクリックすると上から2番目の要素が選択されるようになります。

サンプルについて

このページで利用するような、クラスを指定するだけなら.class名(clas属性)を利用するのが普通です。
→サンプル(equals/test02.html

$("button").click(function(){
	$(".test").css("background-color","#9f9");
});

しかし、以降に続く[ ]を利用した属性のセレクタには.class名(clas属性)では対応できないケースもあります。このページで属性の例としてクラスを用いたのは、以降のページとの統一性のためです。

実際に[ 属性 = '値' ]の構文が利用されるのは、フォーム関連の要素を選択するときでしょう。
→リファレンス: :checkbox「推奨される書き方」