セレクターで要素を選択する
jQueryを使ってコーディングする上で、最も頻繁に出てくる作業のひとつがセレクターによる要素選択でしょう。 この便利さが、他のライブラリをおさえてjQueryがデファクトになりつつある要因のひとつでもあると思います。
殊にバージョン1.3になってからはエンジンがsizzleに変わり、更に柔軟性と実行速度を向上させています。
通常はidによる単一要素選択が多くなるかもしれませんが、上手に使うことでより一層、jQueryによる開発が楽しくなると思います。
セレクター書式確認用ツール
しかし、セレクター書式は時に非常に難解です。これを確認するために、簡単なブックマークレットを作ってみました。
以下のリンクを、Firefoxであればツールバーなどにドラッグして下さい。
IEならば右クリックして「お気に入りに追加」を選び、警告は無視して登録します。
[jQuery Selectors Inspector]
ツールの使い方
登録されたら、早速使ってみましょう。試しに、このページでこのままブックマークから選択してみて下さい。
セレクターを入力するダイアログが表示されたかと思います。
とりあえず、以下のように入力してみましょう。
h4このページ内の、h4タグがハイライトされたはずです。
解除する際は、リロードして下さい。
次に、またInspectorを実行して、今度は次のように入力します。
#navi .sub li:evenこれは「idがnaviの要素の子孫である、subというクラスを持つ要素の子孫で、li要素のうち偶数のもの」という指定です。
結果を見てみて下さい。
Inspectorはどのサイトでも使えるので、開発中に確認が必要になった場合などに使うと便利かと思います。
満足いく結果が得られれば、その書式をそのまま使うことができます。
例えば先ほどの例で選択された要素を消すには、次のようなコードを書きます。
$('#navi .sub li:even').hide();
セレクターを自在に操る
セレクターの強力さの一端が見えたでしょうか。セレクターには、他にも様々な書式があります。
詳細な書式はリファレンスを参照して下さい。