jQueryのフィルターが便利なんですが、
なかなか全部把握出来ないので自分用
にまとめることにしました。マイチート
みたいな記事です。フィルターはかゆい
ところに手が届く便利なもので、場合
によってはコードも短く済ませること
も出来るかもしれません。

というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。

しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。

カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。

Basic Filter(基本フィルタ)

Sample

基本フィルタの全サンプルです。フィルタの説明はjavascriptのコード内のコメントアウトでしています。フォークは一番右の+ボタンから。

以下解説です。

animated

アニメーションしてる要素だけを取得できる

//:animatedでアニメーションしてる要素にだけclass="colored"を加える
$("div:animated").toggleClass("colored");

eq()

集合している要素から、～番目指定で単一エレメントを取得できる。

//ul liの3番目だけ色を赤くする
$("ul#ep  li:eq(2)").css("color", "red");

※1つ目は0と数えますので「eq(2)」と書いた場合は3つ目です。

even

集合している要素から、(0から数えて)偶数行のみ取得できる。

//ul liの偶数行だけ赤くする
$("ul#even li:even").css("color", "red");

※1つ目は0なので3つ目が「2」扱い（偶数）

odd

集合している要素から、(0から数えて)奇数行のみ取得できる。

//ul liの奇数行だけ赤くする
$("ul#odd li:odd").css("color", "red");

first

集合している要素の最初だけ取得できる

//ul liの最初だけ赤くする
$("ul#first li:first").css("color", "red");

last

集合している要素の最後だけ取得できる

//ul liの最後だけ赤くする
$("ul#last li:last").css("color", "red");

gt()

集合している要素から、～番目の後を全て取得できる

//ul liの3番目より後の色を全て赤くする
$("ul#gt  li:gt(2)").css("color", "red");

lt()

集合している要素から、～番目より前を全て取得できる

//ul liの3番目より前の色を全て赤くする
$("ul#lt  li:lt(2)").css("color", "red");

header

見出し要素(h1～h6)を全て取得する

//ul内の見出し(h1～h6)を全て赤くする
$("ul#header  :header").css("color", "red");

※cssで!important指定した場合はそちら優先

not()

セレクタに一致した要素内で、:not(.red)というセレクタに一致する要素以外を取得

//ul liのうちの、class="red"に一致する要素以外を赤くする
$("ul#not li:not(.red)").css("color", "red");

focus

現在フォーカス中の要素を取得する

//focus のinput要素で現在フォーカスされている要素を選択
    $('form#focus *:input').bind( 'focus blur', function(){
        var item = $(this);
        setTimeout(function(){
            item.toggleClass('focused', item .is(':focus'));
        },0);
    });

Basic Filter

Child Filter(子要素フィルタ)

Sample

子要素フィルタの全サンプルです。cssでもお馴染みのものがありますね。同じ感覚でクロスブラウザに対応できる、と考えて頂けると分かりやすいでしょうか・・

first-child

集合している要素内で、親要素ごとの最初の子要素を全て取得できる

//ul liのうちの、親要素毎の最初のliを赤くする
 $("ul.first li:first-child").css("color", "red");

※firstが「要素全体の最初だけ」に対してfirst-childは「親要素ごとの最初の子要素」を取得する

last-child

集合している要素内で、親要素ごとの最後の子要素を全て取得できる

//ul liのうちの、親要素毎の最初のliを赤くする
 $("ul.last li:last-child").css("color", "red");

※lastが「要素全体の最初だけ」に対してlast-childは「親要素ごとの最初の子要素」を取得する

nth-child()

集合している要素内で、親要素ごとの(n)番目の子要素を全て取得できる

//ul liのうちの、親要素毎の最初のliを赤くする
 $("ul.nth li:nth-child(3)").css("color", "red");

※eqが「要素全体のn番目だけ」に対してnth-childは「親要素ごとの最初の子要素」を取得する
※nth-childは、()内の数字が0からではなく、1から始まる（ややこしいわ！）
※偶数、奇数や～個飛ばし、などの細かい指定も出来る
※「英語のまま考えればいい」と教わりました。なるほどｗウホッってなりました。ありがとうございます:D

only-child

集合している要素内で、親要素ごとの唯一の子要素(例ではspanのある子要素のみ)を全て取得できる

//ul liのうちの、spanのあるliを赤くする
 $("ul.only li span:only-child").css("color", "red");

Child Filter

Content Filter(コンテンツフィルタ)

Sample

コンテンツフィルタの全サンプルです。特定の文字列を含んだ要素を取得できる、などなど細かい指令を可能にしてくれます。

:contains()

引数で渡された文字列を含む要素を取得できる

//ul liの「red」というテキストを含む要素赤くする
 $("ul.contains li:contains('red')").css("color", "red");

:empty

要素が空のものを取得できる

//ul liで要素が空のものに「無いです！」というテキストを加えて赤くする
 $("ul.empty li:empty").text("無いです!").css("color", "red");

:has()

指定したセレクタ（例ではspan）を子要素に持つものを取得できる

//ul liでspanを持ったものだけ赤くする
 $("ul.has li:has(span)").css("color", "red");

:parent

指定した親要素を持った子要素で空ではないものを取得できる

//ul liを親に持つspanを赤くする
 $("ul.parent li span:parent").css("color", "red");

※これは僕の例が分かりにくいですね・・・少しややしいですが、color:red;はspanにかかります。
※:emptyの逆と考える
※【追記】「他の要素を持つspan要素」あるいは「空ではないspan要素」を選択する、と書いたほうがいいとコメントで教えてもらいました！有難うございます

Content Filter

Attribute(属性フィルタ)

一応補足ですが、属性ってのはidとかclassとかrelとかtitleとかnameとかそんなんです。

書き方で少し注意点といいますか・・引用符に関して。

$(“ul li[class=’sub01′]”)

このように引用符はシングルとダブルを別途使います。これは逆でも結構です。

$(“ul li[class=\”sub01\”]”)

両方使いたい場合は上記のようにエスケープする必要がありますので注意してください。

Sample

属性フィルタの全サンプルです。良くあるツールチップなんかも属性フィルタでnameやtitleを取得して表示させたりしてます。cssが得意な方はピンとくるのでは無いでしょうか。

マークアップは最後の以外は全て共通です。

<ul class="attribute-n">
    <li>list0</li>
    <li class="eg-01 sub03">list1</li>
    <li>list2</li>
    <li class="eg-02 sub04">list3</li>
</ul>

全部このマークアップで属性フィルタのみで取得する要素を変えています。また、ここではclass属性を例にして見出し等を書いてます。

あと、画像はハイフン入れ忘れてたりしますが、サンプルは全部入ってます。

[class]

指定した属性を持つ要素を取得できる

//ul liでclassを持った要素だけ赤くする
 $("ul.attribute-01 li[class]").css("color", "red");

[class=”value”]

指定した、特定の属性を持つ要素を取得できる

//ul liでclass='eg-02 sub04'を持った要素だけ赤くする
 $("ul.attribute-02 li[class='eg-02 sub04']").css("color", "red");

※class=’eg-02’だけでは取得出来ない

[class!=”value”]

指定した、特定の属性を持つ要素以外を取得できる

//ul liでclass='eg-01'を持った要素以外を赤くする
 $("ul.attribute-03 li[class!='eg-01 sub03']").css("color", "red");

※属性の後に!を付けるとデフォルトと逆の意味になる
※class=’eg-01’だけでは取得出来ない

[class^=”value”]

指定した、属性が特定の文字列で始まる要素を取得できる

//ul liでclass名がegで始まる要素を赤くする
 $("ul.attribute-04 li[class^='eg']").css("color", "red");

[class$=”value”]

指定した、属性が特定の文字列で終わる要素を取得できる

//ul liでclass名が04で終わる要素を赤くする
 $("ul.attribute-05 li[class$='04']").css("color", "red");

※class=’sub04 eg-02’の場合は取得出来ない

[class*=”value”]

指定した、属性が特定の文字列を含む要素を取得できる

//ul liでclass名にg-0が含まれる要素を赤くする
 $("ul.attribute-06 li[class*='g-0']").css("color", "red");

[class~=”value”]

指定した、属性名を含む要素を取得できる

//ul liでclass名にsub04が含まれる要素を赤くする
 $("ul.attribute-07 li[class~='sub04']").css("color", "red");

※class=’eg-02 sub04’でも取得出来る

[class|=”value”]

指定した、属性名とマッチするか、後にハイフンが続く要素を取得できる

//ul liでclass名がegまたはeg-**を含む要素を赤くする
 $("ul.attribute-08 li[class|='eg']").css("color", "red"); 

※class=’eg-02 sub04’は取得出来る
※class=’eg sub04’は取得出来る
※class=’eg02 sub04’は取得出来ない

[name=”value”][name2=”value2″]

指定した、複数の属性名を全て含んだもののみ取得する

//ul liでclass='eg-02 sub04で、idも含んでいる要素を赤くする
 $("ul.attribute-09 li[class='eg-02 sub04'][id]").css("color", "red"); 

※これだけclass=’eg-02 sub04’のli要素にidを含めています

Attribute

対応してる属性の一覧みたいなの欲しいです。全部対応してるのかな？

Form(フォーム)

Sample

フォームの全サンプルです。かなりウザい感じになってますのでフォークしてご自身向けに変えてくださいｗ

spanでラップしてます。単純なフィルタばかりですので画像はなしでいいでしょうか。

:input

input要素を全て取得できる

//input要素の背景を黄色にする
$("#input :input").wrap('<span></span>').parent().css("background", "yellow");

:button

button要素を全て取得できる

//button要素の背景を黄色にする
$("#button :button").wrap('<span></span>').parent().css("background", "yellow");

:checkbox

checkbox要素を全て取得できる

//checkbox要素の背景を黄色にする
$("#checkbox :checkbox").wrap('<span></span>').parent().css("background", "yellow");

:checked

checked=”checked”の含まれたtype=”checkboxを取得できる

//最初からチェックが入っているcheckbox要素の背景を黄色にする
$("#checked :checked").wrap('<span></span>').parent().css("background", "yellow");

:disabled

disabled=”disabled”の含まれた要素を取得する

//disabled="disabled"で選択不能になっている要素の背景を黄色にする
$("#disabled :disabled").wrap('<span></span>').parent().css("background", "yellow");

:enabled

disabled=”disabled”の含まれた要素以外を取得する

//disabled="disabled"で選択不能になっていない要素の背景を黄色にする
$("#enabled :enabled").wrap('<span></span>').parent().css("background", "yellow");

:file

type=”file”のinput要素を取得する

//type="file"のinput要素の背景を黄色にする
$("#file :file").wrap('<span></span>').parent().css("background", "yellow");

:image

type=”image”のinput要素を取得する

//type="image"のinput要素の背景を黄色にする
$("#image :image").wrap('<span></span>').parent().css("background", "yellow");

:password

type=”password”のinput要素を取得する

//type="password"のinput要素の背景を黄色にする
$("#password :password").wrap('<span></span>').parent().css("background", "yellow");

:radio

type=”radio”のinput要素を取得する

//type="radio"のinput要素の背景を黄色にする
$("#radio :radio").wrap('<span></span>').parent().css("background", "yellow"); 

:reset

type=”reset”のinput要素を取得する

//type="reset"のinput要素の背景を黄色にする
$("#reset :reset").wrap('<span></span>').parent().css("background", "yellow");

:selected

selected=”selected”の付いたselect要素を取得する

// selected="selected"の付いたselect要素の背景を黄色にする
$("#selected option:selected").css("background", "yellow");  

:submit

type=”submit”のinput要素を取得する

//type="submit"のinput要素の背景を黄色にする
$("#submit input:submit").wrap('<span></span>').parent().css("background", "yellow"); 

※input:submitではなく、:submitのみだとbutton要素も含まれる・・？

:text

text要素を取得する

//text要素の背景を黄色にする
$("#text :text").css("background", "yellow"); 

Form

Visibility Filter(可視フィルタ)

Sample

可視フィルタの全サンプルです。2つしかないけど。

:hidden

非表示の要素を取得出来る

//非表示になっているものを全て表示する
$(".hiddenbutton").click(function(){
    $("ul li:hidden").show();
    });

:visible

表示されている要素を取得出来る

//表示されているものを非表示にする
$(".visiblebutton").click(function(){
    $("ul.visible li").hide();
    });

Visibility Filter

以上、とっても便利なjQueryのフィルター一覧でした。これらを覚えればCSS3を簡単にクロスブラウザに対応させられたりしますのでいろいろ試してみてください。

これは一応ただの基本で、さらにセレクタなども組み合わせていくといろいろ出来るようになってjQueryが楽しくなります。ハムメディアさんも以前いろいろ試されてました。こういうので発見があったりして結構楽しいです。

まだまだ勉強中なのでお詳しい方、間違い等ありましたらお手数ですがご指摘頂ければ幸いです。