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

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

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

構文

複数の要素/属性にマッチする要素を選択(OR選択)
$("セレクタ , セレクタ")ver1.0〜

機能

複数のセレクタを,(カンマ)で区切って記述することで、各セレクタにマッチしたもの全てを選択します(OR選択)。記述する要素数に制限はありません。1つのクォート内に入れることに注意してください。「"div","span"」のように要素ごとにクォートで囲んではいけません。

解説

html要素の組合せ

サンプル(multiple2/01.html)を開いてbody内にdiv要素とspan要素が2つづつあることを確認してください。jQueryは以下の様に記述され、buttonをクリックするとdiv要素とspan要素を選択しcssメソッドを利用して背景色を緑にします。

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

結果として、buttonをクリックするとdiv要素とspan要素の両方の背景色が緑になります。

class属性の組合せ

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

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

結果として、buttonをクリックするとすべてのdiv要素の背景色が緑になります。