ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。

jQueryを使ってみよう。(基本編 セレクタ１)

＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。

「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。

jQuery セレクタ＆トラバース動作サンプル

[ セレクタ ]

$(“body”)
bodyタグの要素を選択

$(“#id1”)
ID名 id1 の要素を選択

$(“.class1”)
CLASS名 class1 の要素を選択

$(“.class1 .class2”)
CLASS名 class1 の要素の中にあるCLASS名 class2 の要素を選択

$(“.class3, .class4”)
CLASS名 class3、もしくはCLASS名 class4 の要素を選択

$(“.class5”, “#id1”)
ID名 id1 の要素の中にあるCLASS名 class5 の要素を選択

$(“.class6.class7”)
CLASS名 class6 と class7 2つ持つ要素を選択

$(“a[href]”)
aタグのhref属性がある要素を選択

$(“a[href = ‘#pagetop’]”)
aタグのhref属性の値が「#pagetop」の要素を選択

$(“a[href != ‘#pagetop’]”)
aタグのhref属性の値が「#pagetop」でない要素を選択

$(“a[href ^= ‘#link’]”)
aタグのhref属性の値が「#link」から始まる要素を選択

$(“a[href $= ‘bottom’]”)
aタグのhref属性の値が「bottom」で終わる要素を選択

$(“a[href *= ‘page’]”)
aタグのhref属性の値に「page」が含まれている要素を選択

$(“ul li:first”)
すべてのulタグ内をあわせたliタグの中の最初の要素を選択

$(“ul li:first-child”)
各ulタグ内にあるそれぞれのliタグの最初の要素を選択

$(“ul li:last”)
すべてのulタグ内をあわせたliタグの中の最後の要素を選択

$(“ul li:last-child”)
各ulタグ内にあるそれぞれのliタグの最後の要素を選択

$(‘li:not(“.class6”)’)
liタグでCLASS名 class6 が指定されていない要素を選択

[ トラバース ]

要素については先祖、親子、兄弟という階層が存在します。

<div>
	<ul>
		<li>兄</li>
		<li>この要素から見て....ul要素は親、div要素は先祖</li>
		<li>弟</li>
	</u/>
	ul要素からみるとli要素は子、div要素は親ということになります。
</div>

以下説明に子要素や兄要素等の言葉がでてきますが、簡単に説明すると上記のような感じなのでイメージできれば簡単です。

$(“#id1”).find(“.class7”)
ID名 id1 の要素の中にあるCLASS名 class7 の要素を選択

$(“ul”).children(“.class6”)
ulタグ の子要素にある CLASS名 class6 の要素を選択

$(“li.class6”).parent()
CLASS名 class6 があるliタグを持つ親要素を選択

$(“li.class6”).parent(“#id1”)
CLASS名 class6 があるliタグを持つ親要素でID名 id1 の要素を選択

$(“li.class6”).next()
CLASS名 class6 があるliタグに隣接する弟要素を選択

$(“li.class6”).next(“.class7”)
CLASS名 class6 があるliタグに隣接する弟要素の中でCLASS名 class7 の要素であれば選択
(それ以外であれば選択しない)

$(“li.class7”).prev()
CLASS名 class7 があるliタグに隣接する兄要素を選択

$(“li.class7”).next(“.class6”)
CLASS名 class7 があるliタグに隣接する兄要素の中でCLASS名 class6 の要素であれば選択
(それ以外であれば選択しない)

$(“a[href ^= ‘#link’]”).closest(“li”)
aタグのhref属性の値が「#link」から始まる要素の最も近いliタグ(親要素)を選択

$(“li”).slice(“3,12”)
すべてのliタグをあわせた0から数えて3個目から12個目までの間の要素を選択

$(“li”).find(“a”).css({color: ‘white’}).end()
liタグ内にあるaタグにスタイルを追加した後、直前の要素を選択

$(“li”).not(“li.class6”)
すべてのliタグでCLASS名 class6 が指定されていない要素を選択

$(“a[href *= ‘middle’]”).first()
aタグのhref属性の値に「middle」が含まれている一番最初にある要素を選択

$(“a[href *= ‘middle’]”).last()
aタグのhref属性の値に「middle」が含まれている一番最後にある要素を選択

$(“p”).siblings()
pタグの兄弟要素を選択

$(“p”).siblings(“p”)
pタグの兄弟要素の中でpタグの要素を選択

この他にもCSS2、3系のセレクタ、フォーム関連のセレクタ等、まだまだたくさんあります。もっと詳しく動作内容を知りたい場合は、jQuery本家ドキュメント「Selectors – jQuery API」「Traversing – jQuery API」で確認してみてください。