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

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

[ 属性名 ]指定した属性を持つ要素を選択

構文

指定した属性を持つ要素を選択
$("[ 属性 ]")ver1.0〜

機能

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

解説

指定した属性を持つ要素を選択

サンプル(attribute/01.html)を開いてbody内にdiv要素が4つあることを確認してください。div要素は上から2つ目と4つ目にclass属性があり、値は上からtest、sampleと設定されています。jQueryは以下の様に記述され、buttonをクリックするとclass属性を持つものだけを選択します。class属性の値は何でも構わないので、testとsampleの両方が選択されます。選択された要素はcssメソッドで背景色を緑にします。

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

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

html要素を指定しなくてもOK

サンプル(attribute/02.html)を開いてbody内の要素を確認して下さい。div要素とspan要素が2つずつ配置され、各々1つだけclass属性が設定されています。jQuery部分はattribute/01.htmlから変更はありません。html要素の指定はしていないので、div要素、span要素ともclass属性がある要素だけが選択されます。

<div>div</div>
<div class="test">class属性のあるdiv</div>
<span>span</span>
<span class="sample">class属性のあるspan</span>

html要素も指定したい場合は

属性だけでなくhtml要素も指定したい場合は複数のセレクタ(and)を利用します。
サンプル(attribute/03.html)を開いてbody内の構成がattribute/02.htmlから変更が無いことを確認して下さい。

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

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

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