セレクタ

JavaScript

jQuery セレクタ 拡張セレクタ

jQueryにはCSSには存在しない独自のセレクタがあります。「:animated」はjQueryの拡張機能であり、アニメーションが実行中の要素を取得するセレクタです。拡張セレクタの使用は簡潔にプログラミングすることにも繋がります。書式$(':animated')$('div:animated')サンプル拡張セレクタの利用。サンプルでは、3つ並んでいる長方形(div要素)のうち、真ん中のひとつが....
JavaScript

jQuery セレクタ 属性のセレクタ

さまざまな方法で要素の属性値を調べ、マッチする要素を見つけてくれ るのが、これらのセレクタ群です。 まず、最も単純な属性名だけのセレク タ 「$('')」 は、与えられた属性名の属性を持つ要素すべてが マッチします。 例えば、 aタグであれば hrefや targetが属性となりマッチ します。 値がどうであろうと、 要素にその属性さえ指定されていれば抽出 されます。「$('')」 「$('')」...
JavaScript

jQuery セレクタ フォームのセレクタ

jQueryでは、フォーム要素に対しても、様々なセレクタが用意されています。:inputは、フォーム内のすべてのコントロールにマッチします。:inputは、フォーム内のすべてのコントロールにマッチします。「input type="text"」や「input type="checkbox"」といった、タグに「input」を含む要素だけでなく、select、textareaにもマッチします。:text...
JavaScript

jQuery セレクタ 可視条件のセレクタ

これらは、要素の表示状態を利用して抽出条件とするセレクタです。:hiddenはページ上で隠された要素にマッチします。隠されたと判断される条件は、次のようにいくつかあります。display:noneが指定されている要素input type="hidden"のフォーム要素widthやheightが0に設定されている要素親要素、より上階層の要素が隠されているため表示されていない要素ただし、スタイル「vi...
JavaScript

jQuery セレクタ 階層のセレクタ

これらは、DOMの階層構造を利用して抽出条件とするセレクタです。「>」を使って表現する「$('親>子')」のセレクタでは、「親」で指定した要素の中にある子要素を選択します。つまり、直接の親子関係が指定した条件に合致する要素だけマッチします。「スペース」を使って表現する「$('先祖 子孫')」のセレクタは、両者が直接親子関係になくても、階層的に先祖と子孫の関係にあればまっちします。つまり、祖父、曾祖...
JavaScript

jQuery セレクタ 子ノードのセレクタ

これらの、「子ノード」に着目して抽出条件とするセレクタです。:first-childと:last-childは、それぞれ:firstと:lastに似ていますが、:first及び:lastが選択された要素そのものにマッチするのに対し、選択された要素の子ノードを対象にする点が異なります。また、:firstが必ず1つの要素だけにマッチするのに対し、:first-childは元なるセレクタにマッチする要素...
JavaScript

jQuery コンテンツの内容によるセレクタ

contains()、empty、has()、parentは、要素に含まれる内容によって、マッチする要素を抽出します。:contains()は、与えた引数の文字列を含む要素だけがマッチします。:has()は、与えたセレクタにマッチする要素を子ノードとして持つ要素だけがマッチします。:emptyと:parentは正反対の意味になります。:emptyは、子ノードを持たない空の要素だけがマッチします。:...
JavaScript

jQuery セレクタ インデックスによるセレクタ

要素には、出現順に0あkら始まる番号が「インデックス」として割り振られます。:eq、:lt、:gt、:odd、:evenは、インデックスの値に応じて抽出条件を指定するセレクタです。これらのセレクタでは、元になる選択条件に加え、与えたインデックス番号によって結果が抽出されます。:eqは「equel」つまりイコールの意味で、与えたインデックス値に合致する要素を選択します。インデックス値は0から始まりま...
JavaScript

jQuery セレクタ 複数のセレクタをまとめて使う

指定したセレクタそれぞれにマッチした要素の集合が、1つのjQueryオブジェクトとして返されます。ただし、要素の順番は特に決まっていませんので、ドキュメント内の出現順や指定したセレクタの順に返されることを期待して処理を書かないようにしなければなりません。書式$(' セレクタ1,セレクタ2,セレクタ3,・・・ ')$('div, p, .myClass, #myId')サンプル複数のセレクタ<hea...
JavaScript

jQuery セレクタ 要素

HTMLタグから<>を除いたものが、要素セレクタです。ドキュメントの中で該当するタグで記述されたすべての要素にマッチします。書式$(' 要素名 ')$('div')$('p')$('body')サンプル要素セレクタ。サンプルではセレクタにspanタグを設定し、文字色を変更しています。<head> <meta charset="UTF-8"> <title>テストページ</title> <scrip...
JavaScript

jQuery セレクタ クラス

「.」で始まるセレクタは、class属性で要素を抽出します。id属性では1つのid名を複数の要素に付与できませんが、class属性ではそれが可能となり、1つのクラス名を複数の要素にあてられます。書式$(' .クラス名 ')$('.header')サンプルクラスによる選択。サンプルではredクラスが付与された要素のみ、文字色を赤にするように記述しています。<body> <button>クリック</b...
JavaScript

jQuery セレクタ id

「#」はid属性を指定するセレクタです。id属性は、ドキュメント内で必ず一意になるように定義されていなければなりません。つまり、このセレクタでは、選択される要素は必ず1つです。複数の要素に同じid名を付けることはできません。書式$('#id名')$('#content')サンプルid属性による選択。サンプルでは、id属性に「select」と設定したp要素だけ、クリックボタンをクリックすると赤い線で...
JavaScript

jQuery セレクタ「*」全選択

DOMのすべての要素を選択します。全要素を調べるため、処理に時間がかかる場合があります。書式$('*')サンプルすべての要素を選択。サンプルでは、クリックボタンをクリックすると、セレクタで選択したbodyを含むすべての要素に赤い線が付与されます。<body> <button>クリック</button> <div> div <p>p</p> </div> <p>p</p> <span>span</s...