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

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

複数のセレクタ(and)複数の要素/属性をAND選択

構文

複数の要素/属性すべてにマッチする要素を選択(AND選択)
$("要素 要素")ver1.0〜
※上記では便宜上、要素と要素の間にスペースを入れていますが、実際には入れません。
※要素にはhtml要素の他、classやidの属性なども指定できます。

機能

複数の要素を連結して記述することで、全てにマッチした要素だけを選択します(AND選択)。
大抵の場合はhtml要素に続けてclass属性やid属性を記述します(例:div.test、div#sample)。
またclass属性を連続して記述することもできます(例:.test.sample等)。

解説

html要素とclass属性の組合せ

サンプル(multiple1/01.html)を開いてbody内の構成を確認してください。div要素とspan要素が2つづつあり、それぞれ1つだけtestのclass属性が設定されています。jQueryは以下の様に記述され、buttonをクリックするとdiv要素でclass属性がtestの要素を選択しcssメソッドを利用して背景色を緑にします。

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

結果として、buttonをクリックするとdiv要素でtestのクラス属性をもつ1番上のdiv要素だけ背景色が緑になります。

クラス属性どうしの組合せ

サンプル(multiple1/02.html)を開いてbody内の構成を確認してください。div要素が3つあり、それぞれclass属性が設定されています。jQueryは以下の様に記述され、buttonをクリックするとクラス属性がtestとsampleの両方を持っている要素を選択しcssメソッドを利用して背景色を緑にします。

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

結果として、buttonをクリックするとtestとsampleのクラス属性を両方持つ真中のdiv要素だけ背景色が緑になります。