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

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

.class名(clas属性)指定したclass属性を持つ要素を選択

構文

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

機能

.(ドット)の後ろにクラス名をつけると、任意のclass属性を持つ要素を選択します。クラス属性はdocument内に複数存在しうるためセレクタの.id(ID)よりも負荷ががかります。もし1つしか要素が存在しない場合はclassではなくidにするようにしましょう。→参考:使い方「jQueryの高速化」

解説

任意のclass属性を選択

サンプル(class/01.html)を開いてbody内のタグを確認して下さい。div要素とspan要素が2つづつありますが、それぞれ1つだけclass属性にtestと設定してあります。

<div class="test">classあり</div>
<div></div>
<span class="test">classあり</span>
<span></span>

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

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

その結果、buttonをクリックするとdiv属性、span属性に拘わらずclass属性にtestと設定された(上から1番目と3番目)要素の背景色が緑になります。

testを含んでいればokです

このセレクタは他のクラス属性が設定されていても選択されます。サンプル(class/02.html)を開いてbody内のタグを確認して下さい。div要素が3つありますが、ポイントは一番下です。class属性はtestだけでなくsampleも含んでいます。jQueryはclass/02.htmlから変更ありません。

<div class="test">classはtestのみ</div>
<div>classなし</div>
<div class="test sample">classはtestとsample</div>

結果としてbuttonをクリックするとsampleを含む上から3番目の要素も選択されます。

関連項目

もしclass属性がtestだけの要素を選択したい場合は[ 属性名 = '値' ]を利用してください。