jQuery とても便利なフィルター一覧、特定の要素が含まれている要素の変更等

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

明けましておめでとうございます!toshikuraです。今回のtipsは【jQuery とても便利なフィルター一覧】です。テーブルの偶数段のみ背景色をつける場合や、指定段以降に背景色をつける場合等に使えるとても便利なtipsですので、覚えておいても損は無いかと思います。

要素の位置から選択するフィルター

要素の位置から選択するフィルター系。奇数番や偶数番、n番目以降の要素を選択変更する場合につかえるフィルターです。使用頻度は比較的高めかも。

フィルター名 概要
:first 指定要素の最初の要素を選択 $("ul li:first").css();
:first-child 指定親要素のごとに最初の要素を選択 $("ul li:first-child").css();
:last 指定要素の最後の要素を選択 $("ul li:last").css();
:last-child 指定親要素のごとに最後の要素を選択 $("ul li:last-child").css();
:nth-child(n) 指定親要素のごとにn番目の要素を選択 $("li:nth-child(5)").css();
:even 指定要素の偶数番目を選択 $("li:even").css();
:odd 指定要素の奇数番目を選択 $("li:odd").css();
:only-child 子要素がひとつのものを選択 $("div:only-child").css();
:parent 親要素である要素を選択 $("div:parent").css();
:gt(n) n番目以降の要素を選択(※nは0から) $("li:gt(3)").css();
:lt(n) n番目以前の要素を選択(※nは0から) $("li:lt(3)").css();
:eq(n) n番目の要素を選択(※nは0から) $("li:eq(3)").css();

 

要素の状態に応じて選択するフィルター

表示中の要素の選択や、指定文字列を持つ要素を選択変更する場合につかうフィルター。個人的にはanimatedと:notの組み合わせをよく使います。
補足:jQuery .not()と:not()の色々な使い方

フィルター名 説明
:has(セレクター) 子孫要素に指定のセレクターを持っいるものを選択 $("div:has(strong)").css();
:not(セレクター) 指定したセレクターの要素を除外 $("div:not(:animated)").css();
:visible 表示されている要素を選択 $("div:visible").css();
:animated アニメーション中の要素を選択 $("div:animated").css();
:header h1, h2, h3などのheaderを選択 $(":header").css();
:empty 子要素を持たない要素を選択 $("div:empty").css();
:contains(文字) 指定要素の中で任意の文字列を含む要素を選択 $("div:contains(‘text’)").css();

 

input系要素の状態に応じて選択するフィルター

input系の状態に応じるフィルター。チェック状態の要素や選択状態にある要素を選択変更する。

フィルター名 説明
:checked チェック状態にある全ての要素を選択
:selected 選択状態にある全ての要素を選択
:enabled 選択編集可能な全ての要素を選択
:disabled 選択編集不可にある全ての要素を選択

 

input系要素を選択するフィルター

すべてのbutton要素を選択する際やファイルアップロード要素を選択する際に使用します。

フィルター名 説明
:input input, textarea, select, button要素を選択 $(":input").css();
:image image要素を選択 $(":image").css();
:button button要素を選択 $("button").css();
:file file要素を選択 $(":file").css();
:checkbox checkbox要素を選択 $(":checkbox").css();
:hidden hidden要素を選択 $(":hidden").css();
:password password要素を選択 $(":password").css();
:radio radio要素を選択 $(":radio").css();
:reset reset要素を選択 $(":reset").css();
:submit submit要素を選択 $(":submit").css();
:text text要素を選択 $(":text").css();

 
以上になります。2013年もついにスタートです。本年も油断せず日々精進していきたいと思います。何卒よろしくお願いいたします。

参照:jQuery日本語リファレンス