最近のweb開発には欠かせないjQueryですが、まずはセレクタの使い方を覚えないと話になりません。ところがこの記述ルールが初心者にとって非常に紛らわしく、しかもリファレンスを見てすぐにわかるものとは限りません。自分が学び始めた頃に悩んだ（そして今でもときどき間違えそうになる）まぎらわしいセレクタの記述方法についてまとめます。
$(".classA, .classB") //... (1)
$(".classA .classB") //... (2)
$(".classA + .classB") //... (3)
$(".classA.classB") //... (4)
$(".classA", ".classB") //... (5)
$(".classA" + ".classB") //... (6)
$(".classA" + " .classB") //... (7)
さてこれらのセレクタの意味がすぐにわかりますか？
説明
(1), (2), (3)
どのリファレンスでもわかりやすい場所に書いてあることなので簡単です。
(1)はOR条件でセレクタを複数選択します。.classAまたは.classBに一致する要素を選択します。(2)は子孫セレクタです。”.classA”と”.classB”の間には半角スペースが入ります。(3)は隣接選択です。リファレンスをどうぞ。
(4)
.classAと.classBの両方をもつ要素の選択です。(AND条件）。そしてこれは完全一致ではなくて部分一致であることに注意してください。つまり例えば次のようなブロックがあった場合に
<div class="classA classB">最初のdiv</div> <div class="classA classB classC">次のdiv</div>
$(“.classA.classB”)というセレクタが指定されるとこれらのdiv要素を二つとも選択します。二番目のdiv要素にはクラスが3つ指定されていますがこれも選択対象になります。このパターン、実際には
$("div.classA.classB")
といった形でよく使われています。これはclassAとclassBというクラスを二つとも持つdiv要素という意味になります。
この記述法はとても重要で頻繁に使われるにもかかわらず、なぜかちゃんと説明しているサイトがあまり存在しません。自分が探した限りではjQuery本家の公式英語リファレンスだけでした。
http://api.jquery.com/class-selector/
(5)
第一引数はセレクタで第二引数はセレクタのコンテクストです。指定されたコンテクストの中でセレクタに合致するものが選択されます。(1)と似ているのでこんがらがりやすいです。
(6)と(7)
こういう記述も可能です。ここで使われている”+”はjQueryのセレクタとは関係なくてJavaScriptの文字連結演算子です。よって(6)は(4)とまったく同じであり、(7)は二つのクラスセレクタの間に半角スペースが入るので(2)と同じになります。非常にトリッキーなので現場ではこういう記述は避けるべきでしょう。