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年もついにスタートです。本年も油断せず日々精進していきたいと思います。何卒よろしくお願いいたします。