jQuery とても便利なフィルター一覧、特定の要素が含まれている要素の変更等
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
明けましておめでとうございます！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年もついにスタートです。本年も油断せず日々精進していきたいと思います。何卒よろしくお願いいたします。